AngularJS重复输入框的ng-model无法转为数组问题求助

你遇到的核心问题是ng-model绑定的是单个变量而非数组元素，再加上HTML里缺少循环渲染的ng-repeat指令，导致多个输入框共享同一个变量，最终无法以数组形式获取值，自然$scope.newExpiry[$index]会输出undefined。

下面是具体的修复步骤和代码示例：

1. 修正HTML：添加循环指令并绑定数组元素 #

首先要在HTML里补上ng-repeat来循环渲染输入框，同时把ng-model绑定到数组的对应索引，这样每个输入框的值都会存到数组的对应位置：

<form id="register-form" ng-submit="successbloodstock.updateRemark()">
  <!-- 用ng-repeat循环你的目标数组 ['1','2']，$index是当前循环的索引 -->
  <div ng-repeat="item in ['1','2']" class="input-group input-group">
    <div class="input-group-addon" style="width:130px">
      <small>EXPIRATION DATE {{$index + 1}}</small>
    </div>
    <!-- 绑定到数组的对应索引，name属性加索引避免重复冲突 -->
    <input class="form-control" type="date" name="expiry_date_{{$index}}" ng-model="newExpiryArray[$index]" required>
  </div>
</form>

2. 调整控制器：初始化数组并正确获取值 #

在控制器里初始化一个数组来存储多个输入框的值，提交时直接访问这个数组即可：

.controller('successbloodstockCtrl', function($scope,$timeout,$location,$route,$routeParams,$http) {
  var app = this;
  app.number=['asdf','asadf'];
  
  // 初始化数组，长度和循环的数组一致（这里是2）
  $scope.newExpiryArray = new Array(2);

  app.updateRemark = function() {
    var userObject = {};
    // 现在expiry_date是包含所有输入值的数组
    userObject.expiry_date = $scope.newExpiryArray;
    
    // 可以打印整个数组或者单个元素
    console.log('所有到期日期：', $scope.newExpiryArray);
    console.log('第一个到期日期：', $scope.newExpiryArray[0]);
    console.log('第二个到期日期：', $scope.newExpiryArray[1]);

    // 后续可以用$http把这个数组提交到后端
    // $http.post('/your-api-endpoint', userObject)
    //   .then(response => { /* 处理成功逻辑 */ })
    //   .catch(error => { /* 处理错误逻辑 */ });
  }
});

为什么原来的代码会失败？ #

• 你之前的ng-model绑定的是单个变量$scope.newExpiry，多个输入框会覆盖同一个变量，最终只会保留最后一个输入的值，而且它不是数组，所以用[$index]访问自然是undefined。
• 另外，你的HTML代码里缺少ng-repeat指令，根本没法实现循环渲染多个输入框（你提到要根据数组循环，但原代码里没有这个核心逻辑）。

额外优化（可选） #

如果循环的数组是动态的（比如app.number），可以根据数组长度动态初始化存储数组，这样更灵活：

// 控制器里根据app.number的长度初始化数组
$scope.newExpiryArray = new Array(app.number.length);

HTML里改成循环app.number：

<div ng-repeat="item in successbloodstock.number" class="input-group input-group">
  <!-- 其他内容保持不变 -->
</div>

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