ngChange

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

概要
使用方法
デモ

概要

ユーザーが入力値を変更した際に、与えられた式が評価されます。モデルからの値の変更の際には、式は評価されません。

このディレクティブは、ngModelの提供が必要なことに注意してください。

使用方法

<input ng-change="{expression}">
   ...
</input>

引数

引数説明

ngChange

引数	説明
ngChange	型：`式` inputの値の変更によって、評価される式を指定します。

型：式

inputの値の変更によって、評価される式を指定します。

デモ

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="Controller">
      <input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" />
      <input type="checkbox" ng-model="confirmed" id="ng-change-example2" />
      <label for="ng-change-example2">Confirmed</label><br />
      debug = {{confirmed}}<br />
      counter = {{counter}}
    </div>
  </body>
</html>

function Controller($scope) {
  $scope.counter = 0;
  $scope.change = function() {
    $scope.counter++;
  };
}

it('should evaluate the expression if changing from view', function() {
  expect(binding('counter')).toEqual('0');
  element('#ng-change-example1').click();
  expect(binding('counter')).toEqual('1');
  expect(binding('confirmed')).toEqual('true');
});

it('should not evaluate the expression if changing from model', function() {
  element('#ng-change-example2').click();
  expect(binding('counter')).toEqual('0');
  expect(binding('confirmed')).toEqual('true');
});

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<script>function Controller($scope) {
  $scope.counter = 0;
  $scope.change = function() {
    $scope.counter++;
  };
}
</script>
  </head>
  <body>
    <div ng-controller="Controller">
      <input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" />
      <input type="checkbox" ng-model="confirmed" id="ng-change-example2" />
      <label for="ng-change-example2">Confirmed</label><br />
      debug = {{confirmed}}<br />
      counter = {{counter}}
    </div>
  </body>
</html>

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。