Angular循环中通过Key绑定ng-model的问题

我明白你遇到的问题了——在ng-repeat循环里用[key]绑定模型时，key被解析成了字符串索引，而不是你想要的langInput.values里的数字id，导致表单验证失效，也没法正确收集数据。咱们一步步来解决：

问题根源 #

当你用(key, n) in langInput.values遍历数组时，这里的key是数组的字符串类型索引（比如"0"、"1"），而不是每个元素的id值。所以绑定inputs.auction_name_account[key]会生成类似inputs.auction_name_account["0"]的字符串键，完全不符合你想要的inputs.auction_name_account[1]这种数字键形式。

解决方案 #

1. 直接绑定元素的id作为模型键

把ng-model里的[key]换成[n.id]，这样就能直接用每个元素的数字id作为对象属性键，完美匹配你的需求：

<div class="form-group">
  <!-- 去掉(key, n)，直接遍历数组元素即可 -->
  <div data-ng-repeat="n in langInput.values">
    <!-- 嵌套ng-form，让每个循环项拥有独立的表单验证作用域 -->
    <div ng-form="langSubForm" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 u-no-padding">
      <label class="sell__label" for="auction_name_account_{{n.id}}">Główna nazwa Twojej aukcji ({{n.selected }}):</label>
      <div class="pst-relative">
        <input type="text" 
               id="auction_name_account_{{n.id}}" 
               class="form-control" 
               name="auction_name_account" 
               data-ng-model="inputs.auction_name_account[n.id]" 
               data-ng-minlength="10" 
               data-ng-maxlength="60" 
               required />
        <!-- 用嵌套的ng-form来访问验证状态，避免name重复冲突 -->
        <span class="sell__input-text sell__input-text--big-input" data-ng-show="langSubForm.auction_name_account.$error.required">Wymagane!</span>
        <span class="sell__input-text sell__input-text--big-input" data-ng-show="langSubForm.auction_name_account.$error.minlength">Za krótkie!</span>
        <span class="sell__input-text sell__input-text--big-input" data-ng-show="langSubForm.auction_name_account.$error.maxlength">Za długie!</span>
      </div>
    </div>
  </div>
</div>

2. 提前初始化模型对象（可选但推荐）

为了避免AngularJS因为属性不存在而出现绑定延迟问题，建议在控制器里提前根据langInput.values的id初始化模型：

$scope.inputs = {
  auction_name_account: {}
};

// 遍历langInput.values，为每个id初始化空值
angular.forEach($scope.langInput.values, function(item) {
  $scope.inputs.auction_name_account[item.id] = '';
});

为什么这样改有效？ #

• 直接用n.id绑定模型，确保键是数字类型，和你预期的inputs.auction_name_account[1]完全一致；
• 嵌套ng-form解决了循环中表单控件name重复的问题，每个输入框的验证状态都能独立生效；
• 动态生成的id和label的for属性保持唯一，符合HTML规范。

这样修改后，你既能正常触发表单验证提示，后续收集数据时inputs.auction_name_account里的键也都是对应的数字id，直接发送到REST API即可。

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