[英]angularjs custom filter for search in an Array of objects
我有一个对象
{"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>
这是因为您的过滤器每次都针对相同的obj
和query
检索新实例。
Angular会评估每个diggest
中过滤器的表达式以发现变化,因此在每个diggest
角度中,检查过滤器的结果是什么,并且除非过滤器diggest
某个参数发生了变化,否则期望结果为相同。 您可能会认为过滤器的代码每次都在检索完全相同的事物,但事实并非如此,因为您的函数每次都在创建一个新实例,并且使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;
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.