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>
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.
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With