Im trying to filter a single column using a select with multiple options. As soon as I select more than 2 options, the filter breaks and return me 0 results when I am expecting to return the options I selected.
Example if I select Apple and Grape, I should see all items that match my options.
Here an example of my data:
$scope.products = [
{name:"Apple",type:"fruit"},
{name:"Grape",type:"fruit"},
{name:"Orage",type:"fruit"},
{name:"Carrot",type:"vegetable"},
{name:"Milk",type:"dairy"}
]
Here is my HTML
<div ng-controller="MyCtrl">
<select multiple ng-model="Search_by_name">
<option value="Apple">Apple</option>
<option value="Grape">Grape</option>
<option value="Orage">Orage</option>
<option value="Carrot">Carrot</option>
<option value="Milk">Milk</option>
</select>
<ul>
<li ng-repeat="item in products | filter:{name: Search_by_name }">{{item.name}}</li>
</ul>
</div>
Ive been searching google for 2 hours now and cant keep to wrap my head around this one. Anyone have any ideas?
You can create a custom filter function in controller :
$scope.multipleFilter = function(filterCriteria) {
return function(item) {
return (!filterCriteria || filterCriteria.indexOf(item.name) > -1 );
}
};
In the html you can use it like that
<li ng-repeat="item in products | filter: multipleFilter(Search_by_name)">{{item.name}}</li>