Home >Web Front-end >JS Tutorial >About AngularJs ng-change event/directive usage

About AngularJs ng-change event/directive usage

小云云Original: 2018-05-10 17:23:212584browse

This article mainly introduces the summary of AngularJs ng-change events/commands. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Definition and Usage

The ng-change directive is used to tell AngularJS what to do when the value of an HTML element changes.

The ng-change directive needs to be used with the ng-model directive.

AngularJS ng-change directive will not override the native onchange event. If this event is triggered, both the ng-change expression and the native onchange event will be executed.

ng-change event is triggered every time the value changes, it does not need to wait for a completed modification process, or wait for the action to lose focus.

ng-change event is only for actual modification of the input box value, not modification through JavaScript.

Syntax

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

d5fd7aea971a85678ba271703566ebfd, 221f08282418e2996498697df914ce4e, and 4750256ae76b6b9d804861d8f69e79d3 elements are supported.
6d8f25fb4c19d8589488d67d4a3324d6,132fb881aa2cfa2235870f1b0b25902f

Parameter value

Value	Description
expression	Execute expression when the element value changes.

Example description: Execute function when the value of the input box changes:

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

Example description, radio and checkbox

Note: checkbox ng-model is always true or false, not value. Other ng-models default to the value of value

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

Example description , text, select

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>

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

Related recommendations:

Tutorial on the method of controller inheritance in AngularJS

AngularJs Ultimate Shopping Cart Implementation Method

About the implementation of the star rating system of Angularjs rendering using directive

The above is the detailed content of About AngularJs ng-change event/directive usage. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed example of how to use BootStrap TreeViewNext article：Detailed example of how to use BootStrap TreeView

See more

About AngularJs ng-change event/directive usage

Related articles