suchen

Heim >Web-Frontend >js-Tutorial >Informationen zur Verwendung von AngularJs ng-change-Ereignissen/-Anweisungen

Informationen zur Verwendung von AngularJs ng-change-Ereignissen/-Anweisungen

小云云
小云云Original
2018-05-10 17:23:212580Durchsuche

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>

  1. d5fd7aea971a85678ba271703566ebfd, 221f08282418e2996498697df914ce4e und 4750256ae76b6b9d804861d8f69e79d3

  2. 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(&#39;myApp&#39;, [])
.controller(&#39;myCtrl&#39;, [&#39;$scope&#39;, 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(&#39;myApp&#39;, []); 
app.controller(&#39;validateCtrl&#39;, 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(&#39;myApp&#39;, []); 
app.controller(&#39;validateCtrl&#39;, 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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detailliertes Beispiel für die Verwendung von BootStrap TreeViewNächster Artikel：Detailliertes Beispiel für die Verwendung von BootStrap TreeView

In Verbindung stehende Artikel

Mehr sehen