AngularJSng-changeディレクティブ
例
入力フィールドの値が変更されたときに関数を実行します。
<body ng-app="myApp">
<div ng-controller="myCtrl">
<input type="text" ng-change="myFunc()" ng-model="myValue" />
<p>The input field has changed {{count}} times.</p>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope',
function($scope) {
$scope.count = 0;
$scope.myFunc = function() {
$scope.count++;
};
}]);
</script>
</body>
定義と使用法
ng-changeディレクティブは、HTML要素の値が変更されたときに何をするかをAngularJSに指示します。
ng-changeディレクティブには、ディレクティブが存在する必要がありますng-model
。
ng-changeAngularJSからのディレクティブは、要素の元のonchangeイベントをオーバーライドせず、ng-change式と元のonchangeイベントの両方が実行されます。
ng-changeイベントは、値が変更されるたびにトリガーされます。すべての変更が行われるまで、または入力フィールドがフォーカスを失うまで待機しません。
ng-changeイベントは、入力値に実際の変更があった場合にのみトリガーされ、JavaScriptから変更が行われた場合にはトリガーされません。
構文
<element ng-change="expression"></element>
<input>、<select>、および<textarea>でサポートされています。
パラメータ値
| Value | Description |
|---|---|
| expression | An expression to execute when an element's value changes. |