Search code examples
angularjsangularjs-scope

Get value when selected ng-option changes


I have in my .html page a dropdown list,

Dropdown:

<select ng-model="blisterPackTemplateSelected" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates">
    <option value="">Select Account</option>
</select>

I want to execute an action when the user select a value. So In my controller I did:

Controller:

$scope.$watch('blisterPackTemplateSelected', function() {
    alert('changed');
    console.log($scope.blisterPackTemplateSelected);
});

But the changing the value in the dropdownlist doesn't trigger the code : $scope.$watch('blisterPackTemplateSelected', function()

As a result I tried another method with a : ng_change = 'changedValue()' on the select tag

and

Function:

$scope.changedValue = function() {
   console.log($scope.blisterPackTemplateSelected);
}

But the blisterPackTemplateSelected is stored into a child scope. I read that the parent can't get access to the child scope.

What is the correct/best way to execute something when a selected value in a dropdown list changes? If it's method 1, what am I doing wrong with my code?


Solution

  • as Artyom said you need to use ngChange and pass ngModel object as argument to your ngChange function

    Example:

    <div ng-app="App" >
      <div ng-controller="ctrl">
        <select ng-model="blisterPackTemplateSelected" ng-change="changedValue(blisterPackTemplateSelected)" 
                data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates">
          <option value="">Select Account</option>
        </select>
        {{itemList}}     
      </div>       
    </div>
    

    js:

    function ctrl($scope) {
      $scope.itemList = [];
      $scope.blisterPackTemplates = [{id:1,name:"a"},{id:2,name:"b"},{id:3,name:"c"}];
    
      $scope.changedValue = function(item) {
        $scope.itemList.push(item.name);
      }       
    }
    

    Live example: http://jsfiddle.net/choroshin/9w5XT/4/