AngularJS ng-change 指令

AngularJS リファレンスマニュアル

定義と使用方法

ng-change 指令はAngularJSにHTML要素の値が変更されたときに実行する操作を伝えます。

ng-change 指令が必要です ng-model 指令

AngularJSでの ng-change 指令は要素の原始のonchangeイベントをオーバーライドしません。ng-change 式と原始のonchangeイベントが実行されます。

ng-change イベントは値が変更されるたびにトリガーされます。すべての変更が完了するまで待つことはありませんし、入力フィールドがフォーカスを失うまで待つこともありません。

ng-change イベントは実際に値が変更されたときにのみトリガーされます。JavaScriptで行われる変更ではありません。

例

入力フィールドの値が変更されたときに、関数を実行します：

<body ng-app="myApp">
<div ng-controller="myCtrl">
    <input type="text" ng-change="myFunc()" ng-model="myValue" />
    <p>入力フィールドは {{count}} 回変更されました。</p>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
    $scope.count = 0;
    $scope.myFunc = function() {
        $scope.count++;
    });
});
</script>
</body>

実際に試してみてください

文法

<element ng-change="expression</element>

サポート <input>、<select> および <textarea>。

パラメータ

パラメータ 説明
expression 要素の値が変更されたときに実行される式。

AngularJS リファレンスマニュアル