current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 8 down vote favorite

In my angularjs projetc 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>
share|improve this question
up vote 22 down vote accepted

What is understand from your code , you want to get the item selected and do something based on selection , if so ? then see this

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.
}
share|improve this answer
1  
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. – Shobit Sharma Oct 12 '15 at 15:11

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.