Search code examples
javascriptangularjsdrop-down-menuui-select

Angular js pass value from select menu to controller using ng-change


I wanted to pass everytime i select an item from a ui-select to the controller I did try to use ng-update and ng change but it does not seem to work. Any idea? why code is below. Thank you. I just want to trigger a function once i select an item from the ui select.

controller

 $scope.update = function () {
     alert("triggered")
 }

view

<ui-select ng-change="update()" multiple="multiple" tagging="tagging" tagging-label="(custom 'new' label)" ng-model="main.record.skills" theme="bootstrap" sortable="true" style="width: 300px;" title="">
  <ui-select-match class="ui-select-match" placeholder="Select skills">{$ $select.selected.name $}{$ $item.name | limitTo:70 $} {$ $item.name.length > 70 ? "..." : "" $}</ui-select-match >
  <ui-select-choices ng-change="main.update()" refresh="main.read_skills($select.search)" repeat="skill in main.skills | filter:$select.search track by $index">
    <div ng-bind-html="skill.name | highlight: $select.search"></div>
    {$ name $}
  </ui-select-choices>
</ui-select>

Solution

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