Angular JS：在 ng-change 上获取 ng-model

JS

Angular JS：在 ng-change 上获取 ng-model

在使用AngularJS开发Web应用程序时，我们经常需要在输入框的值发生变化时执行一些操作。AngularJS提供了一个非常有用的指令ng-change，可以在输入框的值发生变化时触发一个函数。同时，我们也可以使用ng-model指令来绑定输入框的值到一个变量上。那么，如何在ng-change事件中获取ng-model的值呢？

使用ng-change获取ng-model的值

使用ng-change指令时，我们可以在触发的函数中通过参数来获取ng-model的值。这个参数就是绑定了ng-model的变量。

例如，我们有一个输入框和一个按钮，当输入框的值发生变化时，我们希望将输入框的值打印到控制台上。那么我们可以这样实现：

html
<input type="text" ng-model="inputValue" ng-change="printValue(inputValue)">
<button ng-click="printValue(inputValue)">打印值</button>

在上面的代码中，我们通过ng-model指令将输入框的值绑定到了inputValue变量上。然后，在ng-change事件中，我们调用了一个名为printValue的函数，并传入了inputValue作为参数。在这个函数中，我们可以通过参数inputValue获取输入框的值，并将其打印到控制台上。

示例代码

下面是一个完整的示例代码，演示了如何在ng-change事件中获取ng-model的值，并将其打印到控制台上：

html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="https://Ajax.Googleapis.com/Ajax/libs/AngularJS/1.7.9/angular.min.JS"></script>
  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.printValue = function(value) {
        console.log(value);
      }
    });
  </script>
</head>
<body>
  <div ng-controller="myCtrl">
    <input type="text" ng-model="inputValue" ng-change="printValue(inputValue)">
    <button ng-click="printValue(inputValue)">打印值</button>
  </div>
</body>
</html>

在上面的代码中，我们定义了一个名为myApp的AngularJS应用程序，并创建了一个名为myCtrl的控制器。在控制器中，我们定义了一个名为printValue的函数，用于打印输入框的值到控制台上。然后，我们在HTML中使用ng-model和ng-change指令来实现输入框的绑定和事件触发。

通过使用ng-change指令，我们可以在输入框的值发生变化时执行一些操作。同时，我们可以通过ng-model指令将输入框的值绑定到一个变量上，并在ng-change事件中通过参数来获取该变量的值。这种方式非常方便，可以帮助我们更好地处理用户输入的变化。

参考资料：

1. AngularJS ng-change Directive - W3Schools.com

2. AngularJS ng-model Directive - W3Schools.com