Home>

angularjs ng-change directive

angularjs example

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 some information in the input box:</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>

operation result:

Enter some information in the input box:

The input box has been modified 0 times.

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.

The angularjs ng-change directive does not override the native onchange event. If this event is triggered,Both the ng-change expression and the native onchange event are executed.

The ng-change event fires every time the value changes,It doesn't need to wait for a complete modification process,Or wait for the action to lose focus.

The ng-change event is only for the actual modification of the input box value.Instead of modifying via javascript.

grammar

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

<input> ;,<select> ;, and<textarea>element support.

Parameter value

value description
expression The expression is executed when the element value changes.

  • Previous Talk about JavaScript objects in detail
  • Next Dictionary usage sharing in python