需要在angular ui select中添加多个过滤器 [英] Need to add multiple filter in angular ui select
本文介绍了需要在angular ui select中添加多个过滤器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
需要在angular
uiselect2中添加多个过滤器.
<ui-select id="abc" ng-model="abc" 多个主题="bootstrap" ><ui-select-match placeholder="选择 abc..." class="ui-select-match">{{$item.name |大写}}</ui-select-match><ui-select-choices id="abchoice" class="ui-select-choices" repeat="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>
我有
itemDetails=["a","b","c"]订单项=[c"]
而且我需要通过 filter: $select.search
也通过 orderItem 过滤它.如何在 ui-select 中添加这个自定义过滤器?
在下拉菜单中我应该只得到 a、b,我应该过滤 c
解决方案
尝试类似的事情
var app = angular.module('demo', ['ui.select']);app.controller('DemoCtrl', function($scope) {$scope.itemDetails = ['a','b','c'];$scope.orderItem = {};$scope.orderItem.items = ['a','b'];//默认选中的项目});
在你看来
<ui-select-match placeholder="选择订单项目...">{{$item}}</ui-select-match><ui-select-choices repeat="itemDetails 中的项目 | filter:$select.search">{{物品}}</ui-select-choices></ui-select><p>已选择:{{orderItem.items}}</p>
使用过滤器排除项目
控制器:
'使用严格';var app = angular.module('demo', ['ui.select']);app.controller('DemoCtrl', function($scope) {$scope.itemDetails = ['a','b','c'];$scope.orderItem = {};$scope.orderItem.items = null;});//过滤以排除值/项目app.filter('排除', function() {返回函数(项目){var 过滤 = [];angular.forEach(项目,功能(项目){如果(项目!='c'){过滤.推(项目);}});返回过滤;};});
查看:
已选择:{{orderItem.items}}
<ui-select ng-model="orderItem.items" theme="select2" ng-disabled="disabled" style="width: 300px;"><ui-select-match placeholder="选择订单项...">{{$select.selected}}</ui-select-match><ui-select-choices repeat="itemDetails 中的项目 | 排除 | filter:$select.search">{{物品}}</ui-select-choices></ui-select>
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
解决方案
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>
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>
这篇关于需要在angular ui select中添加多个过滤器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文