Need to add multiple filter in angular ui select

Question

Need to add multiple filter in angular uiselect2.

<div class="form-group ">
    <ui-select id="abc" ng-model="abc" multiple theme="bootstrap"  >
       <ui-select-match placeholder="Select abc..." class="ui-select-match">{{$item.name | capitalize}}</ui-select-match>
        <ui-select-choices id= "abchoice" class="ui-select-choices" repeat="item in itemDetails| filter: $select.search ">
               <div id="selected_{{item}}" ng-bind-html="item .name | capitalize | highlight: $select.search" style="padding: 0px; "></div>
         </ui-select-choices>
     </ui-select>

</div>

I have

itemDetails=["a","b","c"]
orderItem=["c"]

And I need to filter it by filter: $select.search also by orderItem. How to add this custom filter in ui-select?

IN dropdown I shoud get only a, b, i should filter c

MMK · Accepted Answer · 2017-02-02 11:27:08Z

1

Try something like that

var app = angular.module('demo', ['ui.select']);
app.controller('DemoCtrl', function($scope) {

  $scope.itemDetails = ['a','b','c'];
  $scope.orderItem = {};
  $scope.orderItem.items = ['a','b']; // by default selected items

});

In your view

<ui-select multiple ng-model="orderItem.items" theme="select2" ng-disabled="disabled" style="width: 300px;">
   <ui-select-match placeholder="Select order item...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="item in itemDetails | filter:$select.search">
      {{item}}
    </ui-select-choices>
 </ui-select>
  <p>Selected: {{orderItem.items}}</p>

Plunker 1

Exclude an Item using a filter

Controller:

 'use strict';
    var app = angular.module('demo', ['ui.select']);
    app.controller('DemoCtrl', function($scope) {
      $scope.itemDetails = ['a','b','c'];
      $scope.orderItem = {};
      $scope.orderItem.items = null;
    });
  // filter to exclude a value/item
  app.filter('Exclude', function() {
      return function( items) {
        var filtered = [];
        angular.forEach(items, function(item) {
          if(item!='c'){
            filtered.push(item);
          }
        });
        return filtered;
      };          
 });

View:

<p>Selected: {{orderItem.items}}</p>
  <ui-select ng-model="orderItem.items" theme="select2" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select order item...">{{$select.selected}}</ui-select-match>
    <ui-select-choices repeat="item in itemDetails | Exclude |  filter:$select.search">
      {{item}}
    </ui-select-choices>
  </ui-select>

Plunker 2

edited Feb 2, 2017 at 11:27

answered Feb 2, 2017 at 9:25

MMK

3,7311 gold badge26 silver badges30 bronze badges

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

4 Comments

mammam Over a year ago

thnaks for reply... but i need to add filter.. i should not get c in my droupdown.,, thats my question. @MMK

mammam Over a year ago

can u help me!@MMK

MMK Over a year ago

custom filter is required to exclude the object you dont need.

MMK Over a year ago

@mammam check the updated answer, hopefully it will help you

Hornth · Accepted Answer · 2017-02-02 10:08:55Z

0

If you need to filter your orderItem from the list, then remove them to this list.

You should have 3 lists:

allItems (To have all items stored somewhere)
orderItems
itemsInSelect

When you select one item from the itemsInSelect, then add it to the orderItems and remove it from the itemsInSelect.

Is that you want ?

answered Feb 2, 2017 at 10:08

Hornth

3236 silver badges15 bronze badges

1 Comment

Hornth Over a year ago

Sometime, take the problem in another way is the solution ;)

Collectives™ on Stack Overflow

Need to add multiple filter in angular ui select

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related