Send data to controller on ui.select angular
I am trying to select a value from a dropdown and get data from the corresponding select id in angularJs
I came up with angular-ui / ui-select
<ui-select ng-model="customer" theme="selectize">
<ui-select-match placeholder="Customer List">{{$select.selected.Name}}</ui-select-match>
<ui-select-choices repeat="customer in customers | filter: $select.search">
<span ng-bind-html="customer.Name | highlight: $select.search"></span>
<small ng-bind-html="customer.Id.toString() | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
on my controller i have a client method
$scope.setActiveCustomer = function(customer) {
customersService.getCustomers(customer).then(function(response) {
$scope.selectedCustomer = response;
});
};
my problem
-
once i select the customer what event should i use to fire setActiveCustomer (like onchange or something). when i use the
ng-click
event fired many times because it isng-click
used to control activation. -
Another thing is how can I set the initial value for ui-select ?
thank
source to share
According to the ui-select FAQ, your expression ng-model
should contain .
in it, for example:
<ui-select ng-model="model.customer" theme="selectize">
To set the initial value, you can simply set the property specified in ng-model
, so in your controller:
$scope.model = {
customer: $scope.customers[0] // set the initial selected option
};
For onchange event, you can use $scope.$watch()
like this:
$scope.$watch('model.customer', function (customer) {
$scope.setActiveCustomer(customer);
});
Hope it helps.
source to share