Filter multiple items based on array of values

Question

I have a select box that is populated using ng-options.

$scope.items = [
   {ID: '2012', Title: 'Chicago'},
   {ID: '2013', Title: 'New York'},
   {ID: '2014', Title: 'Washington'},
];

<select ng-model="selectedItem" ng-options="item.ID as item.Title for item in items | filter:filterItemNames">
</select>

This returns...

<option value="2012">Chicago</option>
<option value="2013">New York</option>
<option value="2014">Washington</option>

I would like to filter and display multiple items based on their name (i.e. New York and Chicago).

I'm currently trying to use an array with item names to filter, but this is not working.

$scope.filterItemNames = ['New York', 'Chicago'];

dfsq · Accepted Answer · 2015-07-08 18:12:35Z

1

In this case you could create custom filter function:

$scope.filterByNames = function(el) {
    return !$scope.filterItemNames || $scope.filterItemNames.indexOf(el.Title) > -1;
};

and use it like this in HTML:

<select ng-model="selectedItem" 
        ng-options="item.ID as item.Title for item in items | filter:filterByNames">
</select>

Demo: http://plnkr.co/edit/lqiMIlEYdrLlS6K0H2g9?p=preview

edited Jul 8, 2015 at 18:12

answered Jul 8, 2015 at 17:45

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

1 Comment

Kyle Over a year ago

This works but only if filterItemNames is not null or empty. Is there an option to exclude filtering?

Collectives™ on Stack Overflow

Filter multiple items based on array of values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related