How to get the selected option from ui-select multiple

Question

How to get the selected option from ui-select multiple

8.1k Views Asked by John At 04 April 2025 at 10:24

I have some issues figuring out how to get the selected value in a multi select form from ui-select. I have made a snippet to show you what I want to do. In my html I have a made an ui-select with an ng-change-event callback: ng-change="onDatasetChanged(whatShouldBehere?)". When the option is selected, I want to print the selected model only inside the onDatasetChanged()-method in my controller.

angular.module('myApp',['ui.select']).controller('MyController', function ($scope) {
  
  $scope.myUiSelect={model:{}}; // encapsulate your model inside an object.
  $scope.availableData=["a","b","c"]; //some random options
  
  $scope.onDatasetChanged = function(selectedValue){
    console.log("selectedValue",selectedValue);
  }
  
});

<link href="https://rawgit.com/angular-ui/ui-select/master/dist/select.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/angular-ui/ui-select/master/dist/select.js"></script>
<body ng-app="myApp" ng-controller="MyController">
  
  
  
  <ui-select multiple ng-model="myUiSelect.model" close-on-select="false" title="Choose a dataset" ng-change="onDatasetChanged(whatShouldBehere?)">
    <ui-select-match placeholder="Select something">{{$item.label}}</ui-select-match>
      <ui-select-choices repeat="data in availableData | filter:$select.search">
                        {{data}}
      </ui-select-choices>
  </ui-select>
  
  
  
</body>

Original Q&A

There are 1 best solutions below

**John** · Accepted Answer

After a bit of research on the repository page for the ui-select-directive I figured you could use an on-select event binding like this: on-select="onSelect($item, $model)". See the updated snippet:

angular.module('myApp',['ui.select']).controller('MyController', function ($scope) {
  
  $scope.myUiSelect={model:{}}; // encapsulate your model inside an object.
  $scope.availableData=["a","b","c"]; //some random options
  
  $scope.onSelect = function(item,model){
    console.log("selectedItem",item);
  }
  
});

<link href="https://rawgit.com/angular-ui/ui-select/master/dist/select.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/angular-ui/ui-select/master/dist/select.js"></script>
<body ng-app="myApp" ng-controller="MyController">
  
  
  
  <ui-select multiple ng-model="myUiSelect.model" close-on-select="false" title="Choose a dataset" on-select="onSelect($item, $model)">
    <ui-select-match placeholder="Select something">{{$item.label}}</ui-select-match>
      <ui-select-choices repeat="data in availableData | filter:$select.search">
                        {{data}}
      </ui-select-choices>
  </ui-select>
  
  
  
</body>

How to get the selected option from ui-select multiple

There are 1 best solutions below

Related Questions in UI-SELECT

Trending Questions

Popular # Hahtags

Popular Questions