AngularJS过滤器在创建新数组时抛出infdig错误答案

【问题标题】：AngularJS Filter throws infdig error when it creates new arrayAngularJS过滤器在创建新数组时抛出infdig错误
【发布时间】：2015-03-18 07:47:18
【问题描述】：

我正要把我的头撞到墙上。我以为我了解了角度的工作原理（过滤器也是）。但我只是找不到关于我的过滤器的问题。它会导致 infdig。我什至不改变过滤器中的源数组。

(function () {

angular.module('project.filters').filter('splitListFilter', function () {
    return function (data, chunk) {
        if(!data || data.length === 0){
            return data;
        }

        var resultArray = [];
        for (var i = 0, j = data.length; i < j; i += chunk) {
            resultArray.push(data.slice(i, i + chunk));
        }

        return resultArray;
    };
});

})();

我有需要将数据拆分为 x 列的列表。用limitTo解决起来很复杂。

(limitTo: $index*x | limitTo: $last ? -z : -x)

它会导致一个脏模板文件。所以我决定创建一个过滤器，将数组拆分为组。

[1,2,3,4,5,6,7,8] -> [[1,2,3],[4,5,6],[7,8]]

所以我可以很容易地在我的模板中使用它。

你能帮我看看这个过滤器中导致 infdig 的原因吗？

编辑：错误消息本身看起来很奇怪，其中一些数字没有出现在代码中的任何位置，可以在 http://plnkr.co/edit/pV1gkp0o5KeimwPlEMlF 看到

达到 10 次 $digest() 迭代。中止！观察者在最后 5 次迭代中触发：[[{"msg":"fn:regularInterceptedExpression","newVal":23,"oldVal":20}],[{"msg":"fn:regularInterceptedExpression","newVal" :26,"oldVal":23}],[{"msg":"fn:regularInterceptedExpression","newVal":29,"oldVal":26}],[{"msg":"fn:regularInterceptedExpression"," newVal":32,"oldVal":29}],[{"msg":"fn: regularInterceptedExpression","newVal":35,"oldVal":32}]]]

HTML 模板

<div class="row" ng-repeat="chunk in docProfile.SysMedicalInterests | splitListFilter: 3">
    <div class="col-md-4" ng-repeat="medInterest in chunk">
        <label style="font-weight:normal;">
        <input type="checkbox" value="{{medInterest.ID}}" ng-click="docProfile.saveInterest(medInterest.ID)" ng-checked="docProfile.isMedChecked(medInterest.ID)"> {{medInterest.Name}}
        </label>
     </div>
</div>

控制器代码

var me = this;
me['SysMedicalInterests'] = null;

    var loadMedicalInterests = function(){
        var postData = { 'Data': me['data']['subData'] };
        return docService.loadMedicalInterests(postData).then(function(resp)      {
            me['SysMedicalInterests'] = resp['data'];
        }, function(){});
    };

loadMedicalInterests();

so 数组以空引用开始并从服务器加载数据。更改数组会导致第二次过滤器运行。但它不会在那之后停止

编辑：这里是 plunkr http://plnkr.co/edit/OmHQ62VgiCXeVzKa5qjz?p=preview

编辑：https://stackoverflow.com/a/21653981/1666060 上的相关答案，但这仍然不能解释内置过滤器的角度。

这里是angularjs limitTo过滤源代码

https://github.com/angular/angular.js/blob/master/src/ng/filter/limitTo.js#L3

【问题讨论】：

我添加了运行过滤器时收到的错误消息。如果您没有得到类似的东西，请随时编辑/删除。
你在某处使用 $watch 吗？
你是如何使用过滤器的？显示 html。
你使用的是什么 Angular 版本？
我正在使用 AngularJS v1.3.4。而且我没有在代码中的任何地方使用手表。我将通过编辑问题发布我的模板和控制器代码

标签： angularjs angularjs-filter angularjs-infdig

【解决方案1】：

关于究竟是什么原因，我怀疑这与每次运行过滤器时都会创建并返回一个新的数组引用有关。但是，Angular 的内置 filter 过滤器做同样的事情，所以我不确定出了什么问题。这可能与它是一个正在返回的数组的事实有关。

我想出的最好的方法是一种解决方法/hack，将数组引用手动缓存为一个添加的属性，我在数组上调用了$$splitListFilter，并且只有在@ 的测试失败时才更改它987654324@在过滤器中计算出正确的结果：

app.filter('splitListFilter', function () {
    return function (data, chunk) {
        if(!data || data.length === 0){
            return data;
        }

        var results = [];
        for (var i = 0, j = data.length; i < j; i += chunk) {
          results.push(data.slice(i, i + chunk));
        }

        if (!data.$$splitListFilter || !angular.equals(data.$$splitListFilter, results)) {
          data.$$splitListFilter = results;
        }
        return data.$$splitListFilter;
    };
});

你可以在http://plnkr.co/edit/vvVJcyDxsp8uoFOinX3V看到这个工作

答案使用 Angular 1.3.15

【讨论】：

谢谢，我想这应该可以。但我无法理解。我检查了 limitTo 过滤器的源代码。它是如何工作的？

【解决方案2】：

JS 小提琴工作正常：http://jsfiddle.net/3tzapfhh/1/

也许你错误地使用了过滤器。

<body ng-app='app'>
  <div ng-controller='ctrl'>
    {{arr | splitListFilter:3}}
  </div>  
</body>

【讨论】：

这个小提琴使用 angularjs 版本 1.2.1。也许这就是不同的地方。我正在尝试使用 Angular js v1.3.4 运行相同的东西