Question

我创建了一个自定义过滤器，用于将键值对数组分解为一个对象，该对象按特定属性的第一个字母对值进行分组。例如

输入：[{foo: 'bar'}, {faz: 'baz'}, {boo: 'foo'}]

输出：{f: [{foo: bar}, {faz: baz}], b: [{boo, foo}]}

然而，这个过滤器似乎在Angular中造成了无限的消化错误。

＆＃13;

var app = angular.module('app', []);

app.controller('ctrl', ['$scope', function($scope){
  $scope.arr = [{name: 'foo', def: 'bar'}, {name: 'faz', def: 'baz'}, {name: 'boo', def: 'foo'}]
}]);

app.filter('firstLetterChunks', function() {
    return function(input){
        var chunks={};
        for(var i = 0; i < input.length; i++){
            var firstLetter = input[i].name[0].toUpperCase();
            if(!(chunks.hasOwnProperty(firstLetter))) {
                chunks[firstLetter]=[];
            }
            chunks[firstLetter].push(input[i]);
        }

        return chunks;
    };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="ctrl">
    This caused a infdig error. Check your console.
    <div ng-repeat="(firstletter, values) in arr | firstLetterChunks">
      {{firstletter}}
      <hr>
      <div ng-repeat="value in values">
        {{value}}
      </div>
    </div>
  </div>
</div>

＆＃13;

我无法弄清楚原因。根据我发现的情况，这通常是通过修改过滤器中的模型引起的，从而重新触发ng-repeat，但我不认为我这样做。

Answer 1

这是因为每个过滤器调用基本上都返回一个新对象，该对象具有新标识，因此Angular认为某些内容已发生变化。这又会触发一个新的摘要周期，直到达到10个摘要限制为止。

我想可以通过其他方法来修复它，使用缓存来存储计算对象并保留过滤器，但我将代码更改为以下工作方式相同，但您必须重新计算{{1如果数组发生了变化：

chunks

将HTML调用更改为：

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

app.controller('ctrl', ['$scope', function($scope){

  $scope.arr = [{name: 'foo', def: 'bar'}, {name: 'faz', def: 'baz'}, {name: 'boo', def: 'foo'}];

    function getChunks() {
        var input = $scope.arr;
        var chunks = {};
        for(var i = 0; i < input.length; i++){
            var firstLetter = input[i].name[0].toUpperCase();
            if(!(chunks.hasOwnProperty(firstLetter))) {
                chunks[firstLetter]=[];
            }
            chunks[firstLetter].push(input[i]);
        }

        return chunks;
    }

    $scope.chunks = getChunks();
}]);

Fiddle

为什么我的自定义过滤器导致无限消化？

1 个答案: