Avoid multiple use of a Filter in AngularJs

Question

I am trying to avoid using the same filter on the same collection multiple times in AngularJS application.

What is the correct way to do it:

<div ng-app="myApp" ng-controller="PeopleCtrl">
 <ul ng-init="(person in people|filter:{show:true}) as myPeople" ng-if="myPeople.length>0">
    <h4>My People</h4>
    <li ng-repeat="person in myPeople">{{person.name}}; display: {{person.show}};
  </ul>
</div>

CODE PEN

When I use (person in people|filter:{show:true}) as myPeople I try to use an alias in order to not repeat the same filter{show:true} everywhere...

can you detail all the filtering that you want to do, i only see one filtering here. — Walfrat
– Walfrat, Commented Jun 20, 2016 at 13:04
I try do not repeat (person in people|filter:{show:true}) everywhere — serge
– serge, Commented Jun 20, 2016 at 13:05
If you need to show the same filtered version of a list frequently, the most performant way is to construct a filtered version of the myPeople array inside the controller and include that in your template. — Daniel Beck
– Daniel Beck, Commented Jun 20, 2016 at 13:10
yes, but if I have different filters in different combinations... creating for each of them a variable could bring some mess in the code, isn't it — serge
– serge, Commented Jun 20, 2016 at 13:12

dfsq · Accepted Answer · 2016-06-20 13:08:25Z

2

You should do it something like this:

<div ng-init="myPeople = (people | filter:{show:true})">
  <div ng-if="myPeople.length>0">
    <h4> My People</h4>
    <ul>
      <li ng-repeat="person in myPeople">
        {{person.name}}; age: {{person.age}}; show: {{person.show}};
      </li>
    </ul>
  </div>
</div>

answered Jun 20, 2016 at 13:08

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

2 Comments

serge Over a year ago

I used ng-init and ng-if on the same element! ) is that a problem?

dfsq Over a year ago

Yes, you need to have ngIf inside, because due to very high priority it's executed before ngInit.

Collectives™ on Stack Overflow

Avoid multiple use of a Filter in AngularJs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related