CODEWITHSUNDEEP
angularjsfilterangularjs-filter
user1200387
user1200387

Reputation: 625

AngularJS custom filter on repeater broken

I am trying to apply a filter on a repeater in AngularJS but am having an odd bug that is occurring. When the page loads the repeater acts as if it is duplicating the data: 6 rows instead of 3. Then a second later it goes to 3 rows. When i remove the filter it works as it should with 3 rows. Here is my filter:

JS:

app.filter('flagged', function() {
return function(input,flag_filters) {
    var filteredElements = [];
    var filters = ["ALL"];
    if(flag_filters.length > 0)
        filters = flag_filters;
    angular.forEach(input,function(element) {
        angular.forEach(filters,function(color){
            if(angular.equals(element.flag,color) || angular.equals("ALL",color))
                filteredElements.push(element);
        });
    });
    return filteredElements;
};

});

View:

tr ng-repeat="file in files | flagged:filtered | orderBy:'date':true"

Data(files): [{ "title":"Fake Data.docx", "flag":"red", "date":"13 Sept 2013" },{ "title":"Fake Data.docx", "flag":"red", "date":"15 Sept 2013" },{ "title":"Fake Data.docx", "flag":"green", "date":"14 Sept 2013" }]

filtered=["red","green"]

Why is it performing like this?

Upvotes: 0

Views: 616

Answers (1)

johans
johans

Reputation: 1684

Not sure why you need the forEach(input,...) since the filter gets applied to each file in the repeater automatically.

Use JavaScript equality x === y and not angular.equals() unless you want to compare objects/arrays.

You should be careful of complex filters in repeaters for performance reasons.

Upvotes: 1

Related Questions