Heim > Artikel > Web-Frontend > Informationen zur Verwendung von AngularJs ng-change-Ereignissen/-Anweisungen
Informationen zur Verwendung von AngularJs ng-change-Ereignissen/-Anweisungen
- 小云云Original
- 2018-05-10 17:23:212476Durchsuche
In diesem Artikel wird hauptsächlich die Zusammenfassung der ng-change-Ereignisse/-Befehle von AngularJ vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
Definition und Verwendung
Die ng-change-Direktive wird verwendet, um AngularJS mitzuteilen, was zu tun ist, wenn sich der Wert eines HTML-Elements ändert.
Die ng-change-Direktive muss mit der ng-model-Direktive verwendet werden.
Die AngularJS ng-change-Direktive überschreibt das native onchange-Ereignis nicht. Wenn dieses Ereignis ausgelöst wird, werden sowohl der ng-change-Ausdruck als auch das native onchange-Ereignis ausgeführt.
Das ng-change-Ereignis wird jedes Mal ausgelöst, wenn sich der Wert ändert. Es muss nicht auf einen abgeschlossenen Änderungsprozess gewartet werden oder darauf, dass die Aktion den Fokus verliert.
ng-change-Ereignis dient nur der tatsächlichen Änderung des Eingabefeldwerts, nicht der Änderung durch JavaScript.
Syntax
<element ng-change="expression"></element>
d5fd7aea971a85678ba271703566ebfd, 221f08282418e2996498697df914ce4e und 4750256ae76b6b9d804861d8f69e79d3
6d8f25fb4c19d8589488d67d4a3324d6,132fb881aa2cfa2235870f1b0b25902f
Parameterwert
| 值 | 描述 |
|---|---|
| expression | 元素值改变时执行表达式。 |
Beispielbeschreibung: Bei der Eingabe box Führen Sie die Funktion aus, wenn sich der Wert ändert:
<body ng-app="myApp">
<p ng-controller="myCtrl">
<input type="text" ng-change="myFunc()" ng-model="myValue" />
<p>The input field has changed {{count}} times.</p>
</p>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.myFunc = function() {
$scope.count++;
};
}]);
</script>
</body>Beispielbeschreibung, Radio und Kontrollkästchen
Hinweis: Das Kontrollkästchen ng-model ist immer wahr oder falsch, nicht der Wert, das andere ng-model Der Standardwert ist der Wert
HTML
<h3>Radio 控件测试</h3> <p><label> <input type="radio" value="男" name="sex" ng-model="value1" ng-change="radioChecked()" /> 男 </label> <label> <input type="radio" value="女" name="sex" ng-model="value1" ng-change="radioChecked()" /> 女 </label></p> <h3>checked 控件测试</h3> <p><p class="checkbox"> <label> <input name="agree" type="checkbox" value="同意" ng-model="value2" ng-change="checkboxClick()" /> 同意协议 </label> </p> <p class="checkbox"> <label> <input name="agree" type="checkbox" value="同意2" ng-model="value2" ng-change="checkboxClick()" /> 同意协议2 </label> </p></p>
JS:
var app = angular.module('myApp', []);
app.controller('validateCtrl', function ($scope) {
//randio ng-change事件和原始onchange相同
//radio ng-model 的值是value
$scope.radioChecked = function () {
console.info($scope.value1);
}
//checkbox ng-change事件和原始onchange相同
//checkbox ng-model总是是true或false
$scope.checkboxClick = function () {
console.info($scope.value2);
}
});Beispielbeschreibung, Text, Auswahl
HTML
<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>
JS
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);
}
});Verwandte Empfehlungen:
Tutorial zur Methode der Controller-Vererbung in AngularJS
AngularJs Ultimative Einkaufswagen-Implementierungsmethode
Über die Implementierung des Sternebewertungssystems der Angularjs-Rendering-Direktive
Das obige ist der detaillierte Inhalt vonInformationen zur Verwendung von AngularJs ng-change-Ereignissen/-Anweisungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!