问题
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
回答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
回答2:
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 ?
来源:https://stackoverflow.com/questions/41998024/need-to-add-multiple-filter-in-angular-ui-select