Of Stack

Detailed Explanation and Simple Example of AngularJS ng change Instruction

  • 2021-07-06 09:59:58
  • OfStack

AngularJS ng-change Directive

AngularJS instance

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


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
 <p> Enter in the input box 1 Some information :</p>
 <input type="text" ng-change="myFunc()" ng-model="myValue" />
 <p> The input box has been modified  {{count}}  Times. </p>
</div>

<script>
 angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
   $scope.count = 0;
   $scope.myFunc = function() {
    $scope.count++;
   };
  }]);
</script>
</body>
</html>

Run results:

Enter some information in the input box:

The input box has been modified 0 times.

Definition and usage

The ng-change instructions are used to tell AngularJS what to do if the HTML element value changes.

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

The AngularJS ng-change instruction does not override the native onchange event, and if this event is triggered, both the ng-change expression and the native onchange event are executed.

The ng-change event is triggered with each change in value and does not need to wait for a complete modification process or for an action that loses focus.

ng-change events are only for real modifications to input box values, not through JavaScript.

Grammar

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

< input > , < select > , and < textarea > Element support.

Parameter value

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

The above is the knowledge arrangement of AngularJS ng-change instructions, which will be supplemented in the future.

Related articles: