19

In my AngularJS project I am using normal select dropdown and making a function call using ng-change which is perfectly working fine. Now I want to migrate the same dropdown to ui-select. But on-select function call is not working, I tried different ways but no luck. Please find my plnkr

The following are the two ways I tried with ui-select:

<ui-select ng-model="uiSelectedCustomer" theme="select2" on-select="getDataBasedonCustomer(uiSelectedCustomer)" style="min-width: 300px;">
    <ui-select-match placeholder="Select a customer..">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="cust in customers | filter: $select.search">
        <div ng-bind-html="cust.name | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>


<ui-select ng-model="uiSelectedCustomer" theme="select2" on-select="getDataBasedonCustomer(uiSelectedCustomer)" style="min-width: 300px;">
    <match placeholder="Select a customer in the list or search his name ">{{$select.selected.name}}</match>
    <choices repeat="cust in customers | filter: $select.search">
        <div ng-bind-html="cust.name | highlight: $select.search"></div>
    </choices>
</ui-select>
Janos
  • 650
  • 8
  • 13
Madasu K
  • 1,813
  • 2
  • 38
  • 72

1 Answers1

57

What I understand from your code is you want to get the item selected and do something based on selection, if so add on-select="onSelected($item)" to your ui-select and in controller:

$scope.onSelected = function (selectedItem) {
  // do selectedItem.PropertyName like selectedItem.Name or selectedItem.Key 
  // whatever property your list has.
}
skwisgaar
  • 880
  • 2
  • 13
  • 31
Sunil Vurity
  • 830
  • 9
  • 14
  • 3
    For me the callback function would not change anything unless `$item` was passed as the argument and used in the function. I believe this is because the `on-select` callback gets called _before_ the `ng-model` gets updated. – maurice May 29 '15 at 17:26
  • 1
    This does work for multi select, however for me in case of normal select, I had to call the on-select function with $select.selected parameter. – Shobhit Sharma Oct 12 '15 at 15:11
  • Thanks, I was trying to find a way to validate a selection, which in my case were domain names. If an invalid domain is entered, then I do a $select.selected.pop() and return false. – hatsrumandcode Jan 09 '19 at 12:23