AngularJS ng-change 指令

实例

当输入字段的值更改时执行函数:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
  <p>在输入字段中写一些东西:</p>
  <input type="text" ng-change="myFunc()" ng-model="myValue">
  <p>输入字段已经改变 {{count}} 次</p>
</div>
<script>
  angular.module('myApp', [])
    .controller('myCtrl', ['$scope', function($scope) {
      $scope.count = 0;
      $scope.myFunc = function() {
        $scope.count++;
      };
    }]);
</script>
</body>
</html>

运行一下

定义与用法

ng-change 指令告诉 AngularJS 当 HTML 元素的值改变时该怎么做。

ng-change 指令首先需要一个 ng-model 指令。

来自 AngularJS 的 ng-change 指令不会覆盖元素的原始 onchange 事件，ng-change 表达式和原始 onchange 事件都将被执行。

每次值更改都会触发 ng-change 事件。它不会等到所有更改完成，或者输入字段失去焦点。

ng-change 事件仅在输入值发生实际更改时触发，而不是在更改来自 JavaScript 时触发。

语法

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

被 <input>, <select>, and <textarea>支持。

参数值

值	描述
expression	当元素的值更改时要执行的表达式。

AngularJS ng-change 指令

实例

定义与用法

语法

参数值

分类导航