AngularJS filtering ng-repeat on an array

Question

I'm learning Angular. The below code dynamically shows/hides rows of a table based on a <select multiple> control.

The code works but I wonder if there is a way to convert the expression in data-ng-if to a filter expression without creating a custom filter. Also not sure which is a better approach performancewise.

<select id="psgs" data-ng-model="ctrl.showSubGroups"
   ng-options="item.id as item.name group by item.productGroup.name for item in ctrl.productSubGroupList"
   multiple>
</select>

<tr 
   data-ng-if="ctrl.showSubGroups.indexOf(product.productSubGroup.id) > -1" 
   data-ng-repeat="product in ctrl.productList | filter: ??? | orderBy: ctrl.seq">
   ...
</tr>

again, there can be many scenarios.. like ng-if="$even", can filter out odd result.It all depends on your use case. If you have a particular requirement, state it in question. — anoop
– anoop, Commented Apr 2, 2017 at 9:50
@tanmay Because I'm also not sure how to access the array of selected subgroups stored as a controller property from a filter. — Arthur
– Arthur, Commented Apr 2, 2017 at 10:01

tanmay · Accepted Answer · 2017-04-02 10:15:27Z

1

You can achieve that using custom filter and it's better approach as compared to having ng-if on each iteration. You shouldn't be repeating the loop for those which are not going to be rendered.

Here's how. In your HTML, use customFilter (which is a custom filter function we created) like this:

<tr 
   data-ng-repeat="product in ctrl.productList | filter: ctrl.customFilter | orderBy: ctrl.seq">
   ...
</tr>

Now, in your controller, you can have customFilter function like this:

ctrl.customFilter = function(product) {
  return ctrl.showSubGroups.indexOf(product.productSubGroup.id) > -1
}

Here's a simple working example with sample data

answered Apr 2, 2017 at 10:15

tanmay

7,9112 gold badges23 silver badges39 bronze badges

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

2 Comments

Arthur Over a year ago

Thanks, it is easier than what I thought from the documentation. :)

tanmay Over a year ago

@Arthur in Angular most of the things are easier than shown in docs :D glad I could help

Collectives™ on Stack Overflow

AngularJS filtering ng-repeat on an array

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