Javascript angularjs自定义过滤器，用于在对象数组中搜索

我有一个目标

{"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":[],"#":[]}

我需要基于对象名编写一个角度js过滤器。我希望在用户每次输入新字符时都显示一个结果

为此，我创建了这个

过滤器

：

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

这就是我如何使用HTML中的过滤器

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

....

这是因为您的筛选器每次都为相同的

obj

和

query

检索一个新实例

Angular将在每个

diggest

中计算过滤器的表达式，以查找更改，因此在每个

diggest

中，Angular将检查过滤器的结果，除非过滤器的某个参数发生了更改，否则Angular希望结果相同。您可能会认为筛选器的代码每次都在检索完全相同的内容，但事实并非如此，因为您的函数每次都在创建一个新实例，这使得angular认为内容不一样，因此它尝试再次重新计算，以便从筛选器函数获得一致的响应，但您的函数正在再次检索新对象，因此angular将再次尝试。。。当这种情况发生10次时，angular将中止进程并引发异常

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

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

app.filter（'字母搜索'，函数（）{
var-filtered={}；
var lastObj={}；
var lastQuery=“”；
返回函数（obj，查询）{
如果（！查询）
返回obj；
if（angular.equals（obj，lastObj）和&angular.equals（query，lastQuery））
返回过滤；
lastObj=角度复制（obj）；
lastQuery=angular.copy（查询）；
过滤={}；
对于（变量i=65；i<91；i++）{
过滤后的[String.fromCharCode（i）]=[]；
}
过滤的['#']=[]；
用于（obj中的i）{
var_this=obj[i]；
过滤[i]=\u此过滤器（函数（ele）{
var reg=新的RegExp（查询，“gi”）；
返回注册测试（元素名称）；
})
}
返回过滤；
};
});

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