AngularJS - Moving Function To Service

Question

I have a function in my Controller which i am trying to re-write as a service.

The function reads in a length of values passed in from the HTML (from 1 - 12). If there are less than 12 values passed in, the function calculates how many less and displays the remaining number as empty cells.

HTML:

<div ng-app="">
<div ng-controller="EventController">
    <table>
        <tr ng-repeat="country in Countries">
            <th>{{country.countryName}}</th>
            <td ng-repeat="countryDetails in country.Details.slice(0, 12)">{{ countryDetails }}m</td>
            <td ng-repeat="emptyCell in getEmptyCells(country.Details.length)" class="empty">empty</td>
        </tr>
    </table>
    <br>
    <table>
        <tr ng-repeat="country in Countries">
            <th>{{country.countryName}}</th>
            <td ng-repeat="countryDetails in country.Details.slice(12, 24)">{{ countryDetails }}m</td>
            <td ng-repeat="emptyCell in getEmptyCells(country.Details.length)" class="empty">empty</td>
        </tr>
    </table>
    <br>
    <table>
        <tr ng-repeat="country in Countries">
            <th>{{country.countryName}}</th>
            <td ng-repeat="countryDetails in country.Details.slice(24, 36)">{{ countryDetails }}m</td>
            <td ng-repeat="emptyCell in getEmptyCells(country.Details.length)" class="empty">empty</td>
        </tr>
    </table>
</div>
</div>

My JS Function:

$scope.getEmptyCells = function (len) {
    var emptyCells = [];
    for (var i = 0; i < 12 - len; i++) {
        emptyCells.push(i);
    }
    return emptyCells;
}

My New Service:

app.factory('EmptyCellsService', function() {
return {
    getEmptyCells: function(len) {
        var emptyCells = [];
        for(var i = 0; i < 12 - len; i++){
            emptyCells.push(i);
        }
        return emptyCells;
    }
 };
 });

And my call to the new service from the controller:

$scope.getEmptyCells = EmptyCellsService.getEmptyCells();

However the empty cells are no longer displaying.

Here is my working fiddle (when using a function (service code commented out): http://jsfiddle.net/oampz/GkarV/367/

Answer 1

See this updated fiddle.

You should have used

$scope.getEmptyCells = EmptyCellsService.getEmptyCells;

instead of

$scope.getEmptyCells = EmptyCellsService.getEmptyCells();

Answer 2

I have made some changes to you code

1. Given ng-app a value (<div ng-app="app">)
2. Created the module 'app' with service - EmptyCellsService (actually this is a factory not a service)

angular.module("app",[]).factory('EmptyCellsService',

  function() {
                return {
                    getEmptyCells: function(len) {

                    var emptyCells = [];
                    for(var i = 0; i < 12 - len; i++){
                        emptyCells.push(i);
                    }
                    return emptyCells;
                }
             };
         });

3.Changed the EventController as below

function EventController($scope,EmptyCellsService) {
    $scope.Countries = [{
        countryName: "USA",
        Details: [1.1, 2.2, 3.3, 4.4, 5.5, 6.6, 7.7, 8.8, 9.9, 10.0, 11.0, 12.0,
        13.0, 14.0, 15.0, 16.0, 17.0, 18.0, 19.0, 20.0, 21, 22, 23, 24,
        23.0, 24.0, 25.0, 26.0, 27.0, 28.0, 29.0, 30.0, 31, 32, 33, 34]
    }, {
        countryName: "UK",
        Details: [3.3, 4.4, 5.5, 6.6]
    }, {
        countryName: "Russia",
        Details: [7.7, 8.8, 9.9, 10.0]
    }];

    $scope.getEmptyCells = EmptyCellsService.getEmptyCells;


}

Answer 3

First, you are assigning the return value from the function call, that is not what you want, you could just save a reference to the function.

$scope.getEmptyCells = EmptyCellsService.getEmptyCells

Second, your controller function doesn't know anything about EmptyCellsService, since you're not injecting the dependency. You could just pass an argument to the constructor:

function EventController($scope, EmptyCellsService) { ...

And last but not least, on the provided fiddle, you're calling app.factory even that app is not defined anywhere... you should create the module first:

var app = angular.module('app',[]);
app.factory(...

And bind your html to that module:

<html ng-app="app"

Working fiddle: http://jsfiddle.net/GkarV/370/