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>
,
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('myApp', []) .controller('myCtrl', ['$scope', 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('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); } });
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('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); } });
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
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!