I'm currently working with an object in my project:
{"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":[],"#":[]}
My goal is to create an angular js filter that filters the objects based on their name property. The idea is to display filtered results as the user enters each new character.
To achieve this, I have developed a custom 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;
};
});
However, when implementing this angularjs filter, I encountered an error message:
[$rootScope:infdig] 10 $digest() iterations reached. Aborting!
This is how I am trying to utilize the filter feature in my HTML code:
<input type='text' id='cSearch' ng-model='ent' value='' />
<div ng-repeat="(letter,obj) in item | alphabeticSearch:ent">
....
</div>