Angular ui-select multi select: Dropdown is not getting updated on selecting some items from the controller

Question

On click of "select yellow color" button, I want to add yellow to the selected list. Yellow is getting selected, but the dropdown is still showing yellow. In the same way, I want to deselect yellow on click of "deselect yellow color" button. I am able to deselect yellow, but yellow is not appearing in the dropdown. Please help me with this issue. 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);
    }
  };

Here is the plunker link http://plnkr.co/edit/AHZj1zAdOXIt6gICBMuN?p=preview

Endodermis

Answer 1

UPD: this is an issue in ui-select component. You can use my solution as a partial workaround until this issue has not been resolved

ui-select doesn't do filtering of items. It just evaluating your expression in repeat attribute of ui-select-choices. If you want to exclude already used value from suggest, you can do it by yourself.

Add extra filter into repeat

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

And then define your filtering function:

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

Wimple

Thanks, it helped me to some extent. On selecting yellow, drop down is getting updated and yellow is not getting listed. But on deselecting yellow, it is not getting added back to the drop down again. Updated pluncker link : plnkr.co/edit/zMWzYbOmHzfyfe9tob52?p=preview – Endodermis

Found a piece of code, responsible for that in the ui-select sources. My solution is a workaround for this issue: github.com/angular-ui/ui-select/issues/918. I guess there is no way to fully fix it without change in the library – Wimple

Thanks for helping me. Hoping this issue gets solved sooner. Can you suggest any other multi select plugins which looks similar(if any)? I couldn't get any. – Endodermis

I have tried with angular.js(1.3.15) and angular-ui-select(0.8.3). Everything is working as expected now. – Endodermis

@SaiGiridhar, latest ui-select is 0.11.2. But glad to hear that downgrading to previous version can be solution for someone – Wimple