recherche

Maison  >  Article  >  interface Web  >  À propos de l'utilisation des événements/directives AngularJs ng-change

À propos de l'utilisation des événements/directives AngularJs ng-change

小云云
小云云original
2018-05-10 17:23:212544parcourir

Cet article présente principalement le résumé des événements/commandes ng-change d'AngularJs. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Définition et utilisation

La directive ng-change est utilisée pour indiquer à AngularJS quoi faire lorsque la valeur d'un élément HTML change.

La directive ng-change doit être utilisée avec la directive ng-model.

La directive AngularJS ng-change ne remplacera pas l'événement natif onchange Si cet événement est déclenché, l'expression ng-change et l'événement natif onchange seront exécutés.

L'événement ng-change est déclenché à chaque fois que la valeur change. Il n'est pas nécessaire d'attendre un processus de modification terminé, ni d'attendre que l'action perde le focus.

L'événement ng-change est uniquement destiné à la modification réelle de la valeur de la zone de saisie, et non à la modification via JavaScript.

Syntaxe 

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

  1. d5fd7aea971a85678ba271703566ebfd, 221f08282418e2996498697df914ce4e et 4750256ae76b6b9d804861d8f69e79d3

  2. 6d8f25fb4c19d8589488d67d4a3324d6,132fb881aa2cfa2235870f1b0b25902f

Valeur du paramètre

值 描述
expression 元素值改变时执行表达式。

Exemple de description : Lorsque l'entrée box Exécuter la fonction lorsque la valeur change : 

<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>

Exemple de description, radio et case à cocher

Remarque : la case à cocher ng-model est toujours vraie ou fausse, pas de valeur, autre ng-model Le la valeur par défaut est la valeur

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); 
 } 
});

Exemple de description, texte, sélectionnez

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); 
 } 
});

Recommandations associées :

Tutoriel sur la méthode d'héritage de contrôleur dans AngularJS

AngularJs Méthode ultime de mise en œuvre du panier

À propos de la mise en œuvre du système de notation par étoiles du rendu Angularjs à l'aide de la directive

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Exemple détaillé d'utilisation de BootStrap TreeViewArticle suivant：Exemple détaillé d'utilisation de BootStrap TreeView

Articles Liés

Voir plus