filtering multi select dropdown options

debugcn Published at Dev

Madasu K

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.

M. Junaid Salaat

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.