javascript - 在 AngularJS 中的 NgRepeat 指令内获取用户输入

Question

我有一个 AngularJS 应用程序，它有一个 ngRepeat 指令。在指令内，我有一个文本框，用户可以使用它来输入数值。当文本框发生变化时，我想获取用户输入并对其进行操作。如何将用户输入传递到我的 ngChange 事件中？

<table>
  <tr ng-repeat="d in vm.data">
    <td><input type="number" value="{{ d }}" ng-change="vm.onChange(userInput)" /></td> <!-- How can I get the user input here? -->
  </tr>
</table>


(function () {
  var app = angular.module('TestApp', []);
  app.controller('TestCtrl', [function () {
    var vm = this;
    vm.data = [1, 2, 3];

    vm.onChange = function (inputValue) {
      // act on the change event...
    };

  }]);
})();

Answer 1

观察结果

• 您需要将模型添加到 $scope即:$scope.data = [1, 2, 3]; .
• 指令 ng-change与 ng-model 一起工作，所以您需要将该指令设置为每个输入，即: <input ng-model='d' ng-change='onChange(d)' type="number" value="{{ d }}">

看看这段代码:

var app = angular.module('TestApp', []);
app.controller('TestCtrl', ['$scope', function($scope) {
  $scope.data = [1, 2, 3];

  $scope.onChange = function(inputValue) {
    console.log(inputValue);
  };
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>

<div ng-app='TestApp'>
  <table ng-controller="TestCtrl">
    <tr ng-repeat="d in data">
      <td>
        <input ng-model='d' ng-change='onChange(d)' type="number" value="{{ d }}">
      </td>
      <!-- How can I get the user input here? -->
    </tr>
  </table>
</div>

如您所见，现在 onChange input 中的每次更改都会调用函数.