防止多个选择具有相同的值 [英] Prevent multiple select to have the same value

问题描述

应该做什么

我要防止用户能够在具有相同选项的多个< select> 中选择两次相同的选项.

I want to prevent the user to be able to select twice the same option in multiple <select> having the same options.

正在做什么

在第一个下拉菜单上选择一个值时，第二个下拉菜单将不可见(较大).但是，当在第二个下拉列表中选择一个值时(第一个下拉列表中已经有一个)，它将删除所有选择.我最终选择了 [null，null] .

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].

我想念什么吗?

JSFiddle

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>

更多问题

对于这种行为，我应该将 ng-repeat 与 ng-hide 一起使用，而不是将 ng-options 与 filter一起使用?

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:

• 我必须将 arrayFilter 更改为返回 true 或 false 的过滤器，以显示或隐藏该选项.HTML中的语法从array |中的 option更改.arrayFilter 转换为数组中的 option |filter:arrayFilter .
• 我必须通过option.id
删除 track

• I had to change the arrayFilter to a filter that returns true or false to show or hide the option. The syntax in HTML changes from option in array | arrayFilter to option in array | filter:arrayFilter.
• I had to remove track by option.id

我认为问题主要出在以下事实:旧过滤器返回了一个新数组，这使得 ng-model 失去了对所选元素的引用.

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.

JSFiddle

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屋！