Angularjs ui-select dropdown on-select function call issue

Question

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>

Ammamaria

Answer 1

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.
}

Motel

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. – Advisedly

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. – Archaeological

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. – Gastritis