angularjs自定义过滤器搜索中的对象

Question

的数组我有一个对象

{"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> 

Answer 1

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

角将评估每个diggest你的过滤器的表达，以便找到变化，所以在每个diggest角是检查什么是你的过滤器的结果，除非事情已经与过滤角预期的参数之一改变结果是一样的。你会认为你的过滤器的代码每次都检索完全相同的东西，但事实并非如此，因为你的函数每次都创建一个新的实例，并且这使得角度认为事物是不一样的，所以它试图重新 - 再次评估以获得来自过滤器函数的一致响应，但是您的函数正在再次检索新对象，所以角度再次尝试......并且当这种情况发生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; 
    }; 
});