1

I have product array. I want to filter type key. I want to display only vegetables and fruits together. How to set filter on single key and multiple value in AngularJS.

<div ng-controller="MyCtrl">
        <ul>
            <li ng-repeat="item in products | filter:({type:'vegetable'}||{type:'fruit'})">{{item.name}}</li>
        </ul>
    </div>

    var myApp = angular.module('myApp', []);

    function MyCtrl($scope) {
        $scope.products = [
            {name:"Apple",type:"fruit"},
            {name:"Grape",type:"fruit"},
            {name:"Orage",type:"fruit"},
            {name:"Carrot",type:"vegetable"},
            {name:"Milk",type:"dairy"}
        ]
    }
br.julien
  • 3,420
  • 2
  • 23
  • 44
user3398632
  • 65
  • 1
  • 10

1 Answers1

0

The simplest solution is to add a filter to your controller and use that:

$scope.filterFruitsAndVegies = function (item) {
    return item.type === 'fruit' || item.type === 'vegetable';
};

<div ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="item in products | filter: filterFruitsAndVegies">{{item.name}}</li>
    </ul>
</div>

http://plnkr.co/edit/HhZ49dpylTRJMVnSKdyt?p=preview

Wayne Ellery
  • 7,888
  • 1
  • 28
  • 45
  • thanks @wayne Ellery but can we do this with out creating custom filter ? – user3398632 Dec 27 '14 at 08:08
  • My understanding is no. There are quite a few questions with the same answer such as this: http://stackoverflow.com/questions/21987904/angular-js-ng-repeat-filter-by-property-having-one-of-multiple-values-or-of-val – Wayne Ellery Dec 27 '14 at 08:11