AngularJS中如何在ngRepeat指令内获取用户输入传入ngChange

这个问题其实是AngularJS双向绑定的典型应用场景，你当前的写法有两个关键问题需要调整：你用了单向的value属性渲染初始值，却没建立用户输入和数据模型的关联，导致ng-change里拿不到有效输入值。

问题根源 #

你代码里的<input type="number" value="{{ d }}" ...>只是单向渲染：页面加载时会把vm.data里的d值显示在输入框，但用户输入的内容不会同步回vm.data，而且ng-change里的userInput变量根本未定义，自然无法获取输入内容。

解决方案：用ng-model实现双向绑定 #

改用AngularJS的ng-model指令，它会自动建立输入框与数据模型的双向关联——用户输入会同步更新vm.data里的对应项，同时ng-change触发时直接传入绑定的变量就能拿到最新输入值。

修正后的完整代码 #

HTML部分

<table>
  <tr ng-repeat="d in vm.data">
    <!-- 用ng-model替代value，绑定到当前循环的d -->
    <td><input type="number" ng-model="d" ng-change="vm.onChange(d)" /></td>
  </tr>
</table>

JS控制器部分

(function () {
  var app = angular.module('TestApp', []);
  app.controller('TestCtrl', [function () {
    var vm = this;
    vm.data = [1, 2, 3];
    vm.onChange = function (inputValue) {
      // 这里就能直接拿到用户输入的最新值
      console.log('用户输入的数值:', inputValue);
      // 同时vm.data里对应的项已经自动更新了
      console.log('当前完整数据:', vm.data);
    };
  }]);
})();

额外扩展：获取变化项的索引 #

如果你需要知道是vm.data里的哪一项发生了修改，可以把ngRepeat自带的$index变量也传入ng-change：

<td><input type="number" ng-model="d" ng-change="vm.onChange(d, $index)" /></td>

对应的控制器方法可调整为：

vm.onChange = function (inputValue, itemIndex) {
  console.log('第' + (itemIndex + 1) + '项的输入值:', inputValue);
  console.log('对应数据模型中的项:', vm.data[itemIndex]);
};

原理说明 #

ng-model是AngularJS实现双向数据绑定的核心指令：当用户修改输入框内容时，绑定的变量（这里的d）会自动更新；反之，如果代码中修改了vm.data里的值，输入框内容也会同步变化。ng-change会在输入值发生改变时触发，此时传入的变量已经是最新的用户输入值。

内容的提问来源于stack exchange，提问作者Halcyon