Prevent mehrere wählen den gleichen Wert

Question

haben, was es tun sollte

ich den Benutzer verhindern möchten, dass zweimal die gleiche Option auswählen können, in mehreren <select> die gleichen Möglichkeiten haben.

Was ist tun

Wenn ein Wert auf dem ersten Drop-Down-Auswahl, wird der zweite hat die Möglichkeit, nicht sichtbar (gut). Wenn Sie jedoch einen Wert für das zweite Dropdown-Menü auswählen (und das erste bereits vorhanden ist), werden alle ausgewählten Elemente gelöscht. Ich lande mit einer Auswahl [null, null].

Fehle ich etwas?

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>

Weitere Fragen

Für diese Art von Verhalten sollte ich ng-repeat mit ng-hide statt ng-options mit einem filter verwenden?

Was ist die beste Praxis in diesem Fall?

Answer 1

ich endlich einen Weg gefunden, um es mit ein paar Änderungen vornehmen arbeiten:

• ich die arrayFilter zu einem Filter zu ändern hatte, die true oder false kehrt zu zeigen, oder die Option auszublenden. Die Syntax in HTML ändert sich von option in array | arrayFilter zu option in array | filter:arrayFilter.
• Ich hatte track by option.id

Ich denke, das Problem in erster Linie aus der Tatsache kam zu entfernen, dass der alte Filter ein neues Array zurückkehrt, die die ng-model seinen Verweis auf das ausgewählte Element verlieren gemacht.

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>