2多选和单选项列表 [英] 2 multiple select and single option list
问题描述
我有2个多选元素,既从一个变量列表选项。
如果一个变量选择行变量它不会在列选择选项中显示。如果用户取消选择选项,然后变量应显示在两个名单将
$ scope.variables = ['一','B','C','D','E','F'];<选择多个NG模型=selectedAsRowsNG选项=V在变量V>< /选择>
<选择多个NG模型=selectedAsColsNG选项=V在变量V>< /选择>
我想我明白你想要什么。下面是一个例子小提琴:
http://jsfiddle.net/26fZb/209/
关键是使用这样一个自定义过滤器:
过滤器:{名称:'! + selectedAsFriend.name}
编辑:
下面是你的情况与多选。我创建自定义过滤器。
app.filter('myFilter',函数(){
返回功能(inputList,列表){
返回inputList.filter(isAlreadySelected(列表));
}; 功能isAlreadySelected(名单){
复位功能(ELEM){
如果(list.indexOf(ELEM)== -1)
返回true;
其他
返回false;
}
}});
然后用它在HTML文件中:
<选择多个NG模型=selectedAsRowsNG选项=V在变量V | myFilter:selectedAsCols>< /选择>
<选择多个NG模型=selectedAsColsNG选项=V在变量V | myFilter:selectedAsRows>< /选择>
看看满code:
http://plnkr.co/edit/6eWZB75dAdquPD1jMmb7?p=$p$ PVIEW
I have 2 multi select element and both get options from a variable list. If a variable selected as row variable it will not be shown in column select options. if user unselect option then variable should will shown in both list
$scope.variables = ['a','b','c','d','e','f'];
<select multiple ng-model="selectedAsRows" ng-options="v for v in variables"></select>
<select multiple ng-model="selectedAsCols" ng-options="v for v in variables"></select>
I think that I understood what you want. Here is a fiddle with an example:
http://jsfiddle.net/26fZb/209/
The key is to use a custom filter like this one:
filter: { name: '!' + selectedAsFriend.name }
EDIT:
Here is your case with multiSelect. I have created custom filters.
app.filter('myFilter', function() {
return function(inputList, list) {
return inputList.filter(isAlreadySelected(list));
};
function isAlreadySelected(list){
return function(elem){
if (list.indexOf(elem) == -1)
return true;
else
return false;
}
}
});
Then to use it in the html file:
<select multiple ng-model="selectedAsRows" ng-options="v for v in variables | myFilter: selectedAsCols"></select>
<select multiple ng-model="selectedAsCols" ng-options="v for v in variables | myFilter: selectedAsRows"></select>
Take a look at the full code:
http://plnkr.co/edit/6eWZB75dAdquPD1jMmb7?p=preview
这篇关于2多选和单选项列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!