Angular ui-select multi select: Das Dropdown-Menü wird bei der Auswahl einiger Elemente vom Controller nicht aktualisiert

Question

Wenn Sie auf die Schaltfläche "gelbe Farbe auswählen" klicken, möchte ich Gelb zur ausgewählten Liste hinzufügen. Gelb wird ausgewählt, aber das Dropdown-Feld zeigt immer noch Gelb an. Auf die gleiche Weise möchte ich die gelbe Markierung beim Klicken auf die Schaltfläche "Gelbe Farbe abwählen" deaktivieren. Ich kann gelb abwählen, aber gelb erscheint nicht im Dropdown-Menü. Bitte helfen Sie mir bei diesem Problem. HTML:

<ui-select multiple ng-model="multipleDemo.colors" theme="select2" ng-disabled="disabled" style="width: 300px;"> 
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match> 
    <ui-select-choices repeat="color in availableColors | filter:$select.search"> 
     {{color}} 
    </ui-select-choices> 
    </ui-select> 
    <p>Selected: {{multipleDemo.colors}}</p> 

    <input type="button" value="select yellow color" ng-click="selectYellowColor()"/> 
    <input type="button" value="deselect yellow color" ng-click="deselectYellowColor()"/> 

JS:

$scope.availableColors = ['Red','Green','Blue','Yellow','Magenta','Maroon','Umbra','Turquoise']; 
    $scope.multipleDemo = {}; 
    $scope.multipleDemo.colors = ['Blue','Red']; 

    $scope.selectYellowColor = function(){ 
    if($scope.multipleDemo.colors.indexOf($scope.availableColors[3]) == -1){ 
     $scope.multipleDemo.colors.push($scope.availableColors[3]); 
    } 
    }; 

    $scope.deselectYellowColor = function(){ 
    if($scope.multipleDemo.colors.indexOf($scope.availableColors[3]) != -1){ 
     var index = $scope.multipleDemo.colors.indexOf($scope.availableColors[3]); 
     $scope.multipleDemo.colors.splice(index, 1); 
    } 
    }; 

Hier ist die Plunker Link http://plnkr.co/edit/AHZj1zAdOXIt6gICBMuN?p=preview

Answer 1

UPD: Dies ist ein issue in ui-select Komponente. Sie können meine Lösung als eine teilweise Problemumgehung verwenden, bis dieses Problem nicht behoben wurde.

ui-select nicht Filterung von Elementen. Es bewertet nur Ihren Ausdruck in repeat Attribut von . Wenn Sie den bereits verwendeten Wert von sugget ausschließen möchten, können Sie dies selbst tun.

Fügen Sie zusätzliche Filter in repeat

<ui-select-choices repeat="color in availableColors | filter:omitSelectedColors | filter:$select.search"> 

Und dann Ihre Filterfunktion definieren:

$scope.omitSelectedColors = function(color) { 
    return $scope.multipleDemo.colors.indexOf(color) === -1; 
}