Угловой ui-select multi select: Dropdown не обновляется при выборе некоторых элементов с контроллера

Question

При нажатии кнопки «выбрать желтый цвет» я хочу добавить желтый список в выбранный список. Желтый выбирается, но выпадающий показывается желтым. Таким же образом, я хочу отменить выделение желтого цвета при нажатии кнопки «Отменить выбор желтого цвета». Я могу отменить выбор желтого цвета, но желтый цвет не отображается в раскрывающемся списке. Пожалуйста, помогите мне в этом вопросе. 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); 
    } 
    }; 

Вот ссылка plunker http://plnkr.co/edit/AHZj1zAdOXIt6gICBMuN?p=preview

Answer 1

UPD: это в ui-select компоненте issue. Вы можете использовать мое решение как частичное обходное решение до тех пор, пока эта проблема не будет решена.

ui-select не выполняет фильтрацию элементов. Он просто оценивает ваше выражение в атрибуте repeatui-select-choices. Если вы хотите исключить уже использованное значение из предложения, вы можете сделать это самостоятельно.

Добавить дополнительный фильтр в repeat

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

А затем определить свою функцию фильтрации:

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