用于在对象数组中搜索的 angularjs 自定义过滤器答案

【问题标题】：angularjs custom filter for search in an Array of objects用于在对象数组中搜索的 angularjs 自定义过滤器
【发布时间】：2014-09-24 12:13:11
【问题描述】：

我有一个对象

{"A":[],"B":[],"C":[],"D":[],"E":[],"F":[{"name":"Fargo","id":29}],"G":[],"H":[],"I":[],"J":[],"K":[],"L":[],"M":[],"N":[],"O":[],"P":[],"Q":[],"R":[],"S":[{"name":"Sullivan","id":23},{"name":"Sven","id":26}],"T":[],"U":[],"V":[],"W":[],"X":[],"Y":[],"Z":[],"#":[]}

我需要基于对象name 写一个angular js filter。每次用户输入新字符时，我都想显示一个结果。

为此，我创建了这个filter：

app.filter('alphabeticSearch', function () {
    return function (obj,query) {
                if (!query) {
        return obj;
    }
    var filtered = {};
    for (var i = 65; i < 91; i++) {
        filtered[String.fromCharCode(i)] = [];
    }
    filtered['#'] = [];
    for (i in obj) {
        var _this = obj[i];
        filtered[i] = _this.filter(function (ele) {
            var reg = new RegExp(query, "gi");
            return reg.test(ele.name);
        })
    }
    return filtered;
    };
});

但是angularjs 会抛出错误

[$rootScope:infdig] 10 $digest() iterations reached. Aborting!

这就是我在 HTML 中使用过滤器的方式

<input type='text' id='cSearch' ng-model='ent' value='' />
<div ng-repeat="(letter,obj) in item | alphabeticSearch:ent">
   ....
</div>

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

这是因为您的过滤器每次都为相同的 obj 和 query 检索一个新实例。

Angular 将在每个diggest 中评估您的过滤器的表达式，以便找到更改，因此在每个diggest 中，Angular 都会检查您的过滤器的结果，除非某些参数发生了更改过滤器角度期望结果是相同的。你会认为你的过滤器的代码每次都在检索完全相同的东西，但事实并非如此，因为你的函数每次都在创建一个新实例，这使得 Angular 认为事情不一样，所以它试图重新- 再次评估以从您的过滤器函数中获得一致的响应，但是您的函数正在再次检索一个新对象，因此角度再次尝试......并且当这种情况发生 10 次时，角度中止该过程并引发异常。

更改过滤器中的一些内容应该可以解决问题：

app.filter('alphabeticSearch', function () {
    var filtered = {};
    var lastObj={};
    var lastQuery="";
    return function (obj,query) {
       if (!query) 
           return obj;
        if(angular.equals(obj, lastObj) && angular.equals(query,lastQuery))
            return filtered;

        lastObj = angular.copy(obj);
        lastQuery = angular.copy(query);
        filtered={};
        for (var i = 65; i < 91; i++) {
            filtered[String.fromCharCode(i)] = [];
        }
        filtered['#'] = [];
        for (i in obj) {
            var _this = obj[i];
            filtered[i] = _this.filter(function (ele) {
                var reg = new RegExp(query, "gi");
                return reg.test(ele.name);
            })
        }
        return filtered;
    };
});

【讨论】：