Question

我在我的角应用程序中使用ngRepeat，由于某种原因，即使连接到的集合中填充了正确的数据，ngRepeat也不会填充。

我正在做的是将http get请求发送到节点服务器以请求数据，从服务器上检查结果，并在与特定ngRepeat连接的作用域上填充一个集合。

Html文件的ngRepeat部分：

        <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>

Ctrl代码：

 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);
    };

}]);

dataUtils.getDataObj从服务器调用http get请求。当以这种形式使用控制器时，我看到调用了initializeObjects函数并且填充了rowCollection集合，但是ngRepeat保持为空。

我更改了Ctrl ro之后的代码：

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);
    }
}]);

ngRepeat确实填充了，为什么没有在第一个Ctrl配置中填充ngRepeat但在第二个配置中填充？

Answer 1

如果你想使用第一种方式，因为你正在调用一个函数，它最后必须有()。

为了达到你想要的效果，你应该改变这个：

.then($scope.initializeObjects)

作为

.then($scope.initializeObjects())

注意：第二种方式更好，因为您需要在另一时刻重用此$scope函数，否则，请将其保持为正常function()。

Answer 2

在你的第一个实现中，当你在承诺中使用它之前放置$scope.initializeObjects =...它应该有效。

$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);

但是，如果你将你的函数声明为第二次尝试，它将在此闭包中的代码执行之前定义。

您可以查看this question以了解其中的差异。

为什么没有填充ngRepeat

2 个答案: