CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-ng-repeat
Madasu K
Madasu K

Reputation: 1863

filtering multi select dropdown options

In my angularjs application,I am using multi select drop down https://tamtakoe.github.io/oi.select/#/select/#filtered, with the following:

<oi-multiselect  ng-options="item.name for item in ins_Types " ng-model="insuranceTypes"  multiple placeholder="Select" data-ng-required="true" name="insType" ></oi-multiselect >

and 

 $scope.ins_Types = [{id: 1, name : "ins1"},{id: 2, name : "ins2"}, {id: 3, name : "ins3"}, {id: 4, name : "ins4"}];

which is working fine for all the options in $scope.ins_Types. Now I want the option with id < 3 only to be displayed. So I have used the filter to options as shown below :

<oi-multiselect  ng-options="item.name for item in ins_Types | filter:{id < 3} " ng-model="insuranceTypes"  multiple placeholder="Select" data-ng-required="true" name="insType" ></oi-multiselect >

But since then the multi select dropdown stopped responding and none of the options are getting displayed.

I even tried | filter:{item.id < 5} but still the same problem.

Upvotes: 0

Views: 4020

Answers (1)

M. Junaid Salaat
M. Junaid Salaat

Reputation: 3783

You can create a custom filter for your requirement like 

app.filter('myfilter', function() {
  return function(input, condition) {
    var filtered = [];
    input.forEach(function(item, index) {
      if (item.id > condition) {
        filtered.push(item);
      }
    });
    return filtered;
  };
});

And in your markup use it like

<oi-select oi-options="item.name for item in ins_Types | myfilter : 3 track by item.id" ng-model="insuranceTypes" multiple placeholder="Select"></oi-select>

Live Plunker

Hope it helps.

Upvotes: 1

Related Questions