CODEWITHSUNDEEP
angularjs
RichC
RichC

Reputation: 7879

How to use multiple filters on an ng-repeat

I currently have a working repeater that places the fields for each page on the appropriate page. 

<div ng-repeat="p in model.pages">
    <div ng-repeat="f in model.fields | filter: { pageNumber: p.pageNumber }:true">
        <div class="pdf-field">{{f.value}}</div>
    </div>
</div>

However, I need it to filter out any fields that either don't have the isTask property or if the property equals false. The code below kills the entire repeater and includes nothing.

<div ng-repeat="p in model.pages">
    <div ng-repeat="f in model.fields | filter: { pageNumber: p.pageNumber }:true | filter: { isTask: true }">
        <div class="pdf-field">{{f.value}}</div>
    </div>
</div>

Upvotes: 0

Views: 2381

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136124

You could combined both of them into single filter object.

ng-repeat="f in model.fields | filter: { pageNumber: p.pageNumber, isTask: true }"

Rather the better approach would be doing this filtering in controller side once. So that the application will be more performant.

model.pages.filter(function(page){
   page.fields = model.fields.filter(function(field){
      return field.pageNumber === page.pageNumber && field.isTask;
   });
   return page.fields.length;
});

<div ng-repeat="p in model.pages">
    <div ng-repeat="f in p.fields">
        <div class="pdf-field">{{f.value}}</div>
    </div>
</div>

Upvotes: 3

MarkoCen
MarkoCen

Reputation: 2324

How about using ngIf

<div ng-repeat="p in model.pages">
    <div ng-repeat="f in model.fields | filter: { pageNumber: p.pageNumber }:true" ng-if="isTask=true">
        <div class="pdf-field">{{f.value}}</div>
    </div>
</div>

Upvotes: 1

Related Questions