0

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

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

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

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

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

我不知道为什么。从我发现的情况来看，这通常是由于在过滤器中修改了您的模型，从而重新触发了 ng-repeat，但是我认为我没有这样做。

4

1 回答 1

0

发生这种情况是因为每个过滤器调用基本上都会返回一个新对象，该对象具有新的身份，因此 Angular 认为某些东西已经改变了。这又会触发一个新的摘要循环，并一直持续到达到 10 个摘要限制。

我想还有其他方法可以通过使用缓存来存储计算对象并保留过滤器来修复它，但是我将代码更改为以下代码，它的工作原理相同，但是chunks如果数组发生更改，则必须重新计算：

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

并将 HTML 调用更改为：

<div ng-repeat="(firstletter, values) in chunks">

小提琴

于 2015-03-13T22:28:36.787 回答