この記事は主に AngularJs の ng-change イベント/コマンドの概要を紹介するもので、編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
定義と使用法
ng-change ディレクティブは、HTML 要素の値が変更されたときに何を行うかを AngularJS に指示するために使用されます。
ng-change ディレクティブは ng-model ディレクティブと一緒に使用する必要があります。
AngularJS ng-change ディレクティブは、ネイティブの onchange イベントをオーバーライドしません。このイベントがトリガーされると、ng-change 式とネイティブの onchange イベントの両方が実行されます。
ng-change イベントは、値が変更されるたびにトリガーされます。変更プロセスが完了するのを待ったり、アクションがフォーカスを失うのを待つ必要はありません。
ng-change イベントは、JavaScript を介した変更ではなく、入力ボックスの値の実際の変更のみを対象としています。
構文
<element ng-change="expression"></element>
、
&lt; radio&gt;、&lt;チェックボックス&gt;
パラメーター値
入力ボックスの値が変更されたときの実行関数: | 説明、ラジオ、チェックボックスの例 |
---|---|
HTML | JS: |
<form class="form-horizontal"> <p class="form-group"> <label class="control-label">姓名:</label> <input type="text" class="form-control" ng-model="name" ng-change="txtChange();" /> </p> <p class="form-group"> <label class="control-label">选择年级:</label> <select class="form-control" ng-change="selectChange();" ng-model="grade"> <option value="1">一年级</option> <option value="2">二年级</option> </select> </p> </form>
var app = angular.module('myApp', []); app.controller('validateCtrl', function ($scope) { //textbox 的ng-change事件和原始ng-change不相同,而是和$scope.$watch()监听相同 //textbox 的ng-model为当前输入框的内容,为value值 $scope.txtChange = function () { console.info($scope.name); } //select 的ng-change事件和原始ng-change相同 //ng-model 的默认情况下ng-model的结果为value值 $scope.selectChange = function () { console.info($scope.grade); } });
AngularJs 究極のショッピングカートの実装方法 ディレクティブを使用したAngularjsレンダリングの星評価システムの実装について
以上がAngularJs ng-change イベント/ディレクティブの使用法についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。