How to use multiple filters on an ng-repeat

Question

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>

create a custom filter

Hoyen
– Hoyen

2017-06-15 20:14:31 +00:00
Commented Jun 15, 2017 at 20:14 — Hoyen
– Hoyen, Commented Jun 15, 2017 at 20:14

Pankaj Parkar · Accepted Answer · 2017-06-15 20:18:03Z

3

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>

edited Jun 15, 2017 at 20:18

answered Jun 15, 2017 at 20:10

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MarkoCen · Accepted Answer · 2017-06-15 20:08:48Z

1

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>

answered Jun 15, 2017 at 20:08

MarkoCen

2,35417 silver badges25 bronze badges

1 Comment

RichC Over a year ago

this worked also but I had to change to ng-if="f.isTask == true"

Collectives™ on Stack Overflow

How to use multiple filters on an ng-repeat

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related