Angular ui-select multi select: Dropdown nie jest aktualizowany po wybraniu niektórych elementów ze sterownika

Question

Po kliknięciu przycisku "wybierz żółty kolor", chcę dodać żółty do wybranej listy. Żółty jest wybierany, ale menu wciąż ma kolor żółty. W ten sam sposób chcę odznaczyć żółty po kliknięciu przycisku "odznacz żółty kolor". Mogę odznaczyć żółty, ale żółty nie pojawia się w liście rozwijanej. Pomóż mi rozwiązać ten 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); 
    } 
    }; 

Oto link plunker http://plnkr.co/edit/AHZj1zAdOXIt6gICBMuN?p=preview

Answer 1

UPD: jest to issue w ui-select komponentu. Możesz użyć mojego rozwiązania jako częściowego obejścia, dopóki ten problem nie zostanie rozwiązany.

ui-select nie filtruje elementów. Po prostu oceniasz swoje wyrażenie w atrybucie repeat z ui-select-choices. Jeśli chcesz wykluczyć już wykorzystaną wartość z sugestii, możesz zrobić to sam.

Dodaj dodatkowy filtr do repeat

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

a następnie zdefiniować swoją funkcję filtrowania:

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