ng-repeat内ng-model输入框初始值undefined，修改后正常的原因

这个问题我之前做AngularJS项目时也碰到过，本质是ng-value和ng-model的工作逻辑差异导致的，我给你拆解清楚：

为什么只有触碰输入框后才能获取到值？ #

• ng-value的作用仅仅是设置输入框的初始显示文本，它并不会主动把这个值同步到ng-model绑定的变量里。
• 你的data.val[$index]在页面初始化时完全没有被赋值，所以默认是undefined。只有当用户和输入框发生交互（比如点击输入框、修改内容）时，AngularJS的表单控件才会触发「视图值→模型值」的同步，把输入框当前显示的ng-value值写入到ng-model绑定的变量中，这时候你才能拿到数据。

几种可行的解决方案 #

1. 在控制器里提前初始化data.val数组 #

这是最稳妥的方式，当你从数据库拿到vals数据后，直接给data.val赋值：

// 控制器中的代码
$scope.vals = /* 从数据库获取的数组数据 */;
$scope.data = { val: [] };

// 循环初始化data.val，把每个val.ID赋值进去
angular.forEach($scope.vals, function(val, index) {
  $scope.data.val[index] = val.ID;
});

这样页面加载完成后，ng-model绑定的变量就已经有值了，输入框会自动显示这个值，不需要用户触碰就能提交数据。

2. 用ng-init在模板里初始化值 #

如果不想在控制器里处理逻辑，可以在ng-repeat的<li>标签里加ng-init，直接给data.val[$index]赋值：

<form name="form">
  <ul>
    <li ng-repeat="val in vals track by $index" ng-init="data.val[$index] = val.ID">
      <input type="text" ng-model="data.val[$index]">
    </li>
  </ul>
  <button type="button" ng-click="Submit()">提交</button>
</form>

这里甚至可以去掉ng-value，因为ng-model已经有初始值了，输入框会自动渲染这个值。

3. 直接绑定到val.ID（业务允许的话） #

如果你的需求只是提交每个条目的ID（允许修改的话），可以直接把ng-model绑定到val.ID，省去额外的data.val数组：

<form name="form">
  <ul>
    <li ng-repeat="val in vals track by $index">
      <input type="text" ng-model="val.ID">
    </li>
  </ul>
  <button type="button" ng-click="Submit()">提交</button>
</form>

提交的时候直接把vals数组或者需要的字段传给服务器就行，这种方式更简洁。

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