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>

skwisgaar · Accepted Answer · 2020-07-14 07:47:52Z

56

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

edited Jul 14, 2020 at 7:47

skwisgaar

1,0092 gold badges18 silver badges34 bronze badges

answered Feb 26, 2015 at 21:41

Sunil Vurity

8209 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

maurice Over a year ago

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.

Shobhit Sharma Over a year ago

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.

hatsrumandcode Over a year ago

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.

Collectives™ on Stack Overflow

Angularjs ui-select dropdown on-select function call issue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related