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

Question

我快要把头撞到墙上了。我以为我了解 Angular 的​​工作原理(也了解过滤器)。但我就是找不到我的过滤器的问题。它会导致 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() iterations reached. Aborting! Watchers fired in the last 5 iterations: [[{"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>

Controller 代码

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但这仍然无法解释 Angular 内置过滤器。

这里是angularjs limitTo过滤器源代码

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

Answer 1

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

我想出的最好的方法是一种解决方法/黑客，将数组引用手动缓存为添加的属性，我在数组上将其称为 $$splitListFilter ，并且仅更改它如果在 angular.equals 上的测试失败，并且过滤器中计算出正确的结果:

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