current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I have an Object

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

I need to write an angular js filter based on the object name. I'm would like to display a result every time that the user enters a new character.

For that purpose I've created this 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;
    };
});

But the angularjs throws an error 

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

This is how I'm using the filter from my HTML

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

1 Answer 1

up vote 2 down vote accepted

That's because your filter is retrieving a new instance for the same obj and query every time.

Angular will evaluate the expression of your filter in each diggest in order to find changes, so in each diggest angular is checking what's the result of your filter, and unless something has changed with one of the parameters of the filter angular expects the result to be the same. You would think that the code of your filter is retrieving the exact same thing every time, but it's not, because your function is creating a new instance every time, and that makes angular think that things are not the same, so it tries to re-evaluate again in order to get a consistent response from your filter function, but your function is retrieving a new object again, so angular tries again... and when this has happened 10 times angular aborts the process throwing an exception.

Changing a few things in your filter should solve the issue:

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;
    };
});
share|improve this answer
    
thanks its working fine.. –  user1430001 Sep 25 '14 at 5:43

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.