Angular ui-select multi select: Dropdown is not getting updated on selecting some items from the controller
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;
}
SaiGiridhar
Software enthusiast and developer | Contributor and Technical committee member @OpenApiGenerator
Updated on June 05, 2022Comments
-
SaiGiridhar almost 2 years
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