3

i'm trying to select a value from dropdown list and get the data from corresponded select id in angularJs

i have came up with angular-ui/ui-select directives

<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 get customer method

$scope.setActiveCustomer = function(customer) {
  customersService.getCustomers(customer).then(function(response) {
    $scope.selectedCustomer = response;
  });
};

my problem is

  • once i select the customer which event should i use for fire setActiveCustomer (like onchange or something). when i use ng-click event fired many time because ng-click using to control activate.

  • other thing is how can i set initial value for ui-select ?

thanks

Community
  • 1
  • 1
Gayan
  • 2,750
  • 5
  • 47
  • 88

1 Answers1

7

According to the ui-select FAQ, your ng-model expression should have a . in it, for example:

<ui-select ng-model="model.customer" theme="selectize">

To set the initial value, you could just set the property specified in the ng-model, so in your controller:

$scope.model = {
  customer: $scope.customers[0] // set the initial selected option
};

For the onchange event, you could use $scope.$watch() like this:

$scope.$watch('model.customer', function (customer) {
  $scope.setActiveCustomer(customer);
});

Hope this helps.

runTarm
  • 11,537
  • 1
  • 37
  • 37
  • Hi runTarmit solved my first problem amazingly but still i'm stucked with second one – Gayan Aug 15 '14 at 11:49
  • Do you mean setting an initial value? – runTarm Aug 15 '14 at 11:50
  • yep. initial value not assign as expected!! – Gayan Aug 15 '14 at 11:59
  • Could you please show how use set the `$scope.model.customer`? Is the `$scope.customers` available at that time? – runTarm Aug 15 '14 at 12:01
  • yes it's available but when it bind to select ui it's only shows [object Object] i have check those objects using firebug it shows initial binded object was `[Object { Id=1, Name="FirstOne"}]` but it should be something like `Object { Id=1511, Name="FirstOne", $$hashKey="00H"}` – Gayan Aug 15 '14 at 12:07