[解決済み] 選択されたng-optionが変更されたときに値を取得する

質問

私の.htmlページには、ドロップダウンリストがあります。

ドロップダウンです。

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

ユーザーが値を選択したときにアクションを実行したい。そこで、私のコントローラでは、次のようにしました。

コントローラです。

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

しかし、ドロップダウンリストの値を変更しても、コードはトリガーされません。 $scope.$watch('blisterPackTemplateSelected', function()

その結果、私は別の方法を試してみました。 ng_change = 'changedValue()' を付けてみました。

と

機能です。

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

しかし blisterPackTemplateSelected は子スコープに格納されています。親は子スコープにアクセスできないって書いてあったよ。

ドロップダウンリストの選択された値が変更されたときに何かを実行するための正しい/最良の方法は何ですか？方法1である場合、私のコードの何が間違っているのでしょうか？

どのように解決するのですか？

Artyom が言ったように、あなたは ngChange を使用し、ngChange 関数の引数として ngModel オブジェクトを渡します。

例 :

<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);
  }       
}

ライブの例です。 http://jsfiddle.net/choroshin/9w5XT/4/