AngularJS filter service on loop

Question

I've been trying to create a custom filter for table data, but when doing so, when logging to the console the filter function was being called on an infinite loop/

I then decided to run a test with separate data, with a simple filter on the same page to see if the issue persisted and it does, copied from here How to filter multiple values (OR operation) in angularJS.

<div ng-init="movies = [
          {title:'Man on the Moon', genre:'action'},
          {title:'Meet the Robinsons', genre:'family'},
          {title:'Sphere', genre:'action'}
       ];" >
<input type="checkbox" ng-model="genrefilters.action" />Action
<br />
<input type="checkbox" ng-model="genrefilters.family" />Family
<br />{{genrefilters.action}}::{{genrefilters.family}}
<ul>
    <li ng-repeat="movie in movies | bygenre:genrefilters">{{movie.title}}: {{movie.genre}}</li>
</ul>
</div>

angular.module('ppApp').
filter('bygenre', function () {
    return function (movies, genres) {
        console.log('hello')
        var items = {
            genres: genres,
            out: []
        };
        angular.forEach(movies, function (value, key) {
            if (this.genres[value.genre] === true) {
                this.out.push(value);
            }
        }, items);
        return items.out;
    };
});

The filter is still on loop in my application. I tested the provided code in a plnkr and it worked fine.

UPDATE

So debugging the script in console a component service was being used to update the time. Completely separate from the controller I am using for filtering the table. On the $timeout function I was using it seemed to be calling the digest cycle every time it made the request for the new time.

Question

Why is the filter service being called when a $timeout service is called, but no other controllers or other services?

Is the code getting [Error: $rootScope:infdig Infinite $digest Loop](https://docs.angularjs.org/error/$rootScope/infdig)? — georgeawg, Nov 25 '19 at 16:41
No, nothing, just the console log on loop. I tested the script on another state in my application and the same thing happened — Patrick McDermott, Nov 25 '19 at 16:46
@georgeawg debugging the code, a call is being made from a component which updates the time via a `$timeout` service. Originally I thought it had noting to do with the filter being called multiple times, but I commented it out and it has stopped it being called AS many times. It is called every 5 seconds or rather than every half a second. Why would this cause the filter to be called on a loop? — Patrick McDermott, Nov 26 '19 at 11:03

score 1 · Answer 1 · answered Nov 26 '19 at 16:27

The AngularJS framework evaluates the AngularJS expresssion movies | bygenre:genrefilters every digest cycle to determine any changes.

Dirty checking the scope for property changes is a common operation in AngularJS. It happens after every browser event that is integrated with the AngularJS framework.

For more information, see

AngularJS filter service on loop

1 Answers1