防止多个选择具有相同的值 [英] Prevent multiple select to have the same value
问题描述
应该怎么做
我想阻止用户在多个具有相同选项的 中选择两次相同的选项.
它在做什么
在第一个下拉列表中选择一个值时，第二个下拉列表将看不到该选项(很棒).但是当在第二个下拉列表中选择一个值(第一个已经有一个)时，它会删除所有选择.我最终得到一个选择 [null, null].
我错过了什么吗?
var app = angular.module('App', []);app.controller('AppController', function($scope) {$scope.selected = [];$scope.array = [{编号:0，标题:'选项0'}, {编号:1，标题:'选项1'}, {编号:2，标题:'选项2'}, {编号:3，标题:'选项3'}];});app.filter('arrayFilter', function() {return (arr, remove, keep) =>{返回 arr.filter((item) => {for (var i in remove) {if (remove[i] == item.id) {//如果选中当前选中，返回true如果(我 == 保持){返回真；}//否则，当前项被选中，返回false返回假；}}返回真；});};});<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script><div ng-app="App" ng-controller="AppController"><select ng-model="selected[0]" ng-options="option.id as option.title for option in array | arrayFilter:selected:0 track by option.id"></select><select ng-model="selected[1]" ng-options="option.id as option.title for option in array | arrayFilter:selected:1 track by option.id"></select>{{ 选中 }}更多问题
对于这种行为，我应该使用 ng-repeat 和 ng-hide 而不是 ng-options 和 filter?
在这种情况下，最佳做法是什么?
我终于找到了一种方法，通过一些更改使其工作:
- 我必须将
arrayFilter更改为返回true或false的过滤器以显示或隐藏该选项.HTML 中的语法从数组中的选项更改 |arrayFilter到数组中的选项 |filter:arrayFilter. - 我不得不删除
track by option.id
我认为问题主要来自于旧过滤器返回一个新数组，这使得 ng-model 失去对所选元素的引用.
var app = angular.module('App', []);app.controller('AppController', function($scope) {$scope.selected = [];$scope.array = [{编号:0，标题:'选项0'}, {编号:1，标题:'选项1'}, {编号:2，标题:'选项2'}, {编号:3，标题:'选项3'}];$scope.arrayFilter = 函数(选择数组，位置){返回函数(项目，索引){返回 selectionArray.indexOf(item.id) == -1 ||item.id == selectionArray[position];}}});<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script><div ng-app="App" ng-controller="AppController"><select ng-model="selected[0]" ng-options="option.id as option.title for option in array | filter:arrayFilter(selected, 0)"></select><select ng-model="selected[1]" ng-options="option.id as option.title for option in array | filter:arrayFilter(selected, 1)"></select>{{ 选中 }}What it should do
I want to prevent the user to be able to select twice the same option in multiple <select> having the same options.
What it is doing
When selecting a value on the first dropdown, the second won't have the option visible (great). But when selecting a value on the second dropdown (and the first one already have one), it's deleting all the selections. I end up with a selection [null, null].
Am I missing something?
var app = angular.module('App', []);
app.controller('AppController', function($scope) {
$scope.selected = [];
$scope.array = [{
id: 0,
title: 'Option0'
}, {
id: 1,
title: 'Option1'
}, {
id: 2,
title: 'Option2'
}, {
id: 3,
title: 'Option3'
}];
});
app.filter('arrayFilter', function() {
return (arr, remove, keep) => {
return arr.filter((item) => {
for (var i in remove) {
if (remove[i] == item.id) {
// If checking current selected, return true
if (i == keep) {
return true;
}
// Otherwise, current item is selected, return false
return false;
}
}
return true;
});
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController">
<select ng-model="selected[0]" ng-options="option.id as option.title for option in array | arrayFilter:selected:0 track by option.id"></select>
<select ng-model="selected[1]" ng-options="option.id as option.title for option in array | arrayFilter:selected:1 track by option.id"></select>
{{ selected }}
</div>
More questions
For this kind of behavior should I use ng-repeat with ng-hide instead of ng-options with a filter?
What's the best practice to have in this case?
I finally found a way to make it work with a couple of changes:
- I had to change the
arrayFilterto a filter that returnstrueorfalseto show or hide the option. The syntax in HTML changes fromoption in array | arrayFiltertooption in array | filter:arrayFilter. - I had to remove
track by option.id
I think the problem mainly came from the fact that the old filter was returning a new array which made the ng-model lose its reference to the selected element.
var app = angular.module('App', []);
app.controller('AppController', function($scope) {
$scope.selected = [];
$scope.array = [{
id: 0,
title: 'Option0'
}, {
id: 1,
title: 'Option1'
}, {
id: 2,
title: 'Option2'
}, {
id: 3,
title: 'Option3'
}];
$scope.arrayFilter = function(selectionArray, position) {
return function(item, index) {
return selectionArray.indexOf(item.id) == -1 || item.id == selectionArray[position];
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController">
<select ng-model="selected[0]" ng-options="option.id as option.title for option in array | filter:arrayFilter(selected, 0)"></select>
<select ng-model="selected[1]" ng-options="option.id as option.title for option in array | filter:arrayFilter(selected, 1)"></select>
{{ selected }}
</div>
这篇关于防止多个选择具有相同的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
