防止多重選擇具有相同的價值

我要防止用戶能夠選擇在多個具有相同的選項<select>兩次相同的選項。

它做

什麼當選擇第一個下拉列表中選擇值，第二不會有選項可見（偉大的）。但是，當在第二個下拉列表中選擇一個值（並且第一個下拉列表中已有一個）時，它將刪除所有選擇。我最終選擇了[null, null]。

我錯過了什麼嗎？

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？

這種情況下的最佳做法是什麼？

來源

2016-12-31 Elfayer

我終於找到了一種方法，使其與一對夫婦的變化的工作：

我不得不把arrayFilter更改爲返回true或false顯示或隱藏選項的過濾器。 HTML中的語法從option in array | arrayFilter更改爲option in array | filter:arrayFilter。
，我不得不刪除track by option.id

我認爲問題主要來自一個事實，即舊的過濾器正在恢復這使得ng-model失去其參考所選元素的新數組。

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>

來源

2017-01-03 07:46:29 Elfayer

防止多重選擇具有相同的價值

回答

相關問題