ng-repeat中的angular Infinite $ digest循环

时间:2015-11-21 18:59:29

标签: angularjs

我想在ng-repeat属性中调用函数,这是我的代码

example plnkr

HTML

<body ng-controller="mainCtrl">
  <div ng-repeat='item in getGroupedRange() track by item.id'>
    <span>{{item.val}}</span>
    <span>{{item.abs}}</span>
    <span>{{item.rel}}</span>
    <span>{{item.cum}}</span>
  </div>
</body>

JS

$scope.getGroupedRange = function() {
    return [
      {
        val: 1,
        abs: 1,
        rel: 1,
        cum: 1,
        id: 123456
      }
    ];
  };

当我打开控制台时,我注意到了错误

10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"fn: function (c,d,e,f){e=a(c,d,e,f);return b(e,c,d)}","newVal":9,"oldVal":8}],[{"msg":"fn: function (c,d,e,f){e=a(c,d,e,f);return b(e,c,d)}","newVal":10,"oldVal":9}],[{"msg":"fn: function (c,d,e,f){e=a(c,d,e,f);return b(e,c,d)}","newVal":11,"oldVal":10}],[{"msg":"fn: function (c,d,e,f){e=a(c,d,e,f);return b(e,c,d)}","newVal":12,"oldVal":11}],[{"msg":"fn: function (c,d,e,f){e=a(c,d,e,f);return b(e,c,d)}","newVal":13,"oldVal":12}]]

我的代码的主要目标是使用ng-repeat中的函数来计算每个事件循环中的数据

3 个答案:

答案 0 :(得分:5)

不,你不能像// in your view controller: - (UIView *)preferredFocusedView { return myCollectionView; } 一样使用这个功能。问题是Angular使用摘要循环中对象的严格比较来确定自上次检查后属性的值是否发生了变化。所以会发生的是ngRepeat每次调用时都会返回 new 值(新数组)。 Angular不知道并认为这个值不稳定,因此继续检查。但它在10次检查后中止。

您需要构造必要的数组并将其分配给scope属性,因此在摘要循环期间不会更改:

getGroupedRange

然后像在ngRepeat

中一样使用它
$scope.groupedRange = $scope.getGroupedRange();

答案 1 :(得分:0)

Angular将为您计算并自动显示模板中的数据更改。但是通过将ng-repeat='item in getGroupedRange()放入endles循环重新计算中。

尝试通过将列表中的项目值(可以通过$scope.getGroupedRange函数以任何方式更改)分配给某个范围变量(例如$scope.range)来避免这种情况,该变量将被迭代{的{1}}。

控制器中的

ng-repeat
模板中的

$scope.getGroupedRange = function() {
    $scope.range =  [
      {
        val: 1,
        abs: 1,
        rel: 1,
        cum: 1,
        id: 123456
      }
    ];
  };

答案 2 :(得分:0)

找到解决方案:

  $scope.prev = null;
  $scope.getGroupedRange = function() {
    var data = [{
      val: 1,
      abs: 1,
      rel: 1,
      cum: 1,
      id: 123456
    }];
    if (angular.equals($scope.prev, data)) {
      return $scope.prev;
    }
    $scope.prev = data;
    return data;
  };