3

我正要把头撞到墙上。我以为我了解了角度的工作原理（过滤器也是）。但我只是找不到关于我的过滤器的问题。它会导致 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();

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

编辑：这里是 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

4

2 回答 2

2

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

我想出的最好的方法是一种解决方法/hack，将数组引用手动缓存为一个添加的属性，我已经在数组上调用了它，并且只有在测试失败并计算出正确的结果$$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

于 2015-03-18T09:01:00.240 回答
0

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

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

<body ng-app='app'>
  <div ng-controller='ctrl'>
    {{arr | splitListFilter:3}}
  </div>  
</body>
于 2015-03-18T08:55:18.090 回答