web-dev-qa-db-ja.com

ngChangeは、モデルがプログラムで変更されたときに呼び出されます

モデルがプログラムで変更されたときにangularのng-changeが呼び出されると、問題が発生します。

$scope.sendMessage = function() {
    $scope.message = "Message sent";
}

$scope.confirmed = true;
$scope.mySelectBox = $scope.selects[1];

<select ng-model="mySelectBox"
        ng-options="item.name for item in selects track by item.name"
        ng-change="sendMessage()">
</select>

コード例は次のとおりです。 http://plnkr.co/edit/R4MO86ihMrauHXhpCMxi?p=preview

sendMessageは呼び出されるべきではないため、メッセージはnullである必要があります。モデルはプログラムで変更されます。

angularjsangularjs-ng-change
11
divide by zero

ドキュメントによると、あなたは正しいです。

https://docs.angularjs.org/api/ng/directive/ngChange

しかし、これはイベントがフックされる順序によって引き起こされたバグのようです

それを回避する最良の方法-jsハンドラー（onchange）に頼ること

$scope.$watch("mySelectBox", function(a,b) {
    if (a.name!=b.name) {
       $scope.message = "Message sent! (old="+b.name+', new='+a.name+')';
    }
  });

Plunkを参照してください http://plnkr.co/edit/2ZbxS1tszppR9SrNqxVB?p=preview

HTH

3
sambomartin

ngModelOptions で試すことができます。参考のためにこのプランカーを参照してください http://plnkr.co/edit/BdKx62RW5Ls2Iz1H3VR1?p=preview 。

私の例では、ng-model-options="{ updateOn: 'change', debounce: { change: 0 } }"を使用しましたが、機能しているようです。選択を変更すると、ngChangeで提供される関数のみが実行されます。初期化フェーズでは、messageは空のままです。

15
kTT

Ng-changeコールバックは、モデルが変更されるたびに変更され、初期設定をそのような変更として扱います。あなたがしたいと思うかもしれないことは、目的のコードを実行することですユーザーがそれと対話した後でのみ。フィールドの$ touchedプロパティを確認できます。

<form name="exampleForm" ng-controller="ExampleController">
  <select ng-model="mySelectBox" name="mySelectBox"
          ng-options="item.name for item in selects track by item.name"
          ng-change="sendMessage()">
  </select>
  <p>message = {{message}}</p>
</form>


$scope.sendMessage = function() {
    if ($scope.exampleForm.mySelectBox.$touched) {
        $scope.message = "Message sent";
    }
}
4
Tomek Sułkowski

コントローラでモデルに値を提供しているので、リストと一致するモデルの値を設定すると、ng-changeが呼び出されます。

更新されたプランカーを参照してください： http://plnkr.co/edit/f3xGmKesLFbzti56WLyH?p=preview

0
Shubham Nigam