Why ngRepeat is not populated

Question

I'm using ngRepeat in my angular application and for some reason the ngRepeat did not populate even though the collection that it is connected to is populated with the correct data.

What i'm doing is sending http get request to a node server to request the data, go over the result from the server and populate a collection on the scope that is connected to that specific ngRepeat.

The ngRepeat part of the Html file:

        <div id="cellRow" ng-repeat="obj in rowsCollection track by obj.index">
            <div class="inputsContainer">
                <input ng-model="obj.col1"></input>
                <input ng-model="obj.col2"></input>
                <input ng-model="obj.col3"></input>
            </div>
        </div>

The Ctrl code:

 angular.module('App').controller('Ctrl', ['$scope','dataUtils', function($scope,dataUtils) {
    $scope.dataObj = null;
    $scope.rowsCollection = [];
    dataUtils.getDataObj()
    .then($scope.initializeObjects)
    .catch($scope.showError);


    $scope.initializeObjects = function(data) {
        if( data && data.length > 0 ) {
          for(var index = 0; index < 21; index++) {
              $scope.dataObj = {};
              $scope.dataObj.index = index + 1;
              $scope.dataObj.col1 = data[0][index];
              $scope.dataObj.col2 = data[1][index];
              $scope.dataObj.col3 = data[2][index];
              $scope.rowsCollection.push($scope.dataObj);
          }
        }
    };

    $scope.showError = function(errorMsg) {
        console.log(errorMsg);
    };

}]);

The dataUtils.getDataObj calls an http get request from the server. When using the controller in this form i see that the initializeObjects function is called and the rowCollection collection is populated but the ngRepeat stays empty.

After i changed the Ctrl ro the following code:

angular.module('App').controller('Ctrl', ['$scope','dataUtils', function($scope,dataUtils) {
    $scope.dataObj = null;
    $scope.rowsCollection = [];
    dataUtils.getDataObj()
    .then(initializeObjects)
    .catch(showError);

    function initializeObjects(data) {
        if( data && data.length > 0 ) {
          for(var index = 0; index < 21; index++) {
              $scope.dataObj = {};
              $scope.dataObj.index = index + 1;
              $scope.dataObj.col1 = data[0][index];
              $scope.dataObj.col2 = data[1][index];
              $scope.dataObj.col3 = data[2][index];
              $scope.rowsCollection.push($scope.dataObj);
          }
        }
    }

    function showError(errorMsg) {
        console.log(errorMsg);
    }
}]);

The ngRepeat did populate, why didn't the ngRepeat populate in the first Ctrl configuration but did in the second ?

score 2 · Answer 1 · answered Jul 13 '16 at 04:48

2

If you want to use the first way, since you're calling a function, it must have () at the end.

So to achieve what you want you should change this:

.then($scope.initializeObjects)

for:

.then($scope.initializeObjects())

Note: The second way is better, since you need to reuse this $scope function in another moment, otherwise, keep it as a normal function().

answered Jul 13 '16 at 04:48

developer033

24,267
8
82
108

Trying to call initializeObjects in the way you suggested causes the following error: TypeError: $scope.initializeObjects is not a function – user3475306 Jul 13 '16 at 05:03
As i mentioned when calling the function without '()', the function is called the problem is that the ngRepeat is not populated. – user3475306 Jul 13 '16 at 05:08
I doubt the function can be called without `()`. I can provide a demo to demonstrate that `functions` should have the `()`. – developer033 Jul 13 '16 at 05:15

score 0 · Answer 2 · edited May 23 '17 at 11:44

In ur first implementation, it should work when u put the $scope.initializeObjects =... before using it in the promise.

$scope.initializeObjects = function(data) {
    if( data && data.length > 0 ) {
      for(var index = 0; index < 21; index++) {
          $scope.dataObj = {};
          $scope.dataObj.index = index + 1;
          $scope.dataObj.col1 = data[0][index];
          $scope.dataObj.col2 = data[1][index];
          $scope.dataObj.col3 = data[2][index];
          $scope.rowsCollection.push($scope.dataObj);
      }
    }
};

$scope.showError = function(errorMsg) {
    console.log(errorMsg);
};

dataUtils.getDataObj()
    .then($scope.initializeObjects)
    .catch($scope.showError);

However, if u declare your function as your second attempt, it will be defined before the code in this closure get executed.

You may check this question to understand the difference.

Why ngRepeat is not populated

2 Answers2