AngularJS中为循环生成的文本框分配唯一名称的技术问询

嘿，我完全懂你的需求——你想让ng-repeat循环出来的每个文本框都有独一无二的name属性，这样就能用ng-messages给每个输入框单独展示校验提示对吧？你的现有代码里name是固定的"textVal"，这会导致所有输入框的校验状态绑在一起，根本没法单独控制提示，我来帮你调整一下：

核心问题分析 #

当前代码里的name="textVal"是静态值，所有循环生成的输入框都会共用这个name，所以employees.textVal.$error会指向所有输入框的共同状态，自然没法单独显示每个输入框的错误提示。我们需要把循环变量t和emp.indexOf(empId)的索引值拼接成动态的唯一name。

修改后的完整代码 #

<form name="employees">
  <tr ng-repeat="t in [0,1,2,3,4,5,6,7,8,9]" 
      id="row_{{emp.indexOf(empId)}}_{{t}}" 
      ng-if="true === isShow[emp.indexOf(empId)][t]">
    <td>
      <input type="text" 
             maxlength="20" 
             class="w3-input w3-border w3-round" 
             name="textVal_{{emp.indexOf(empId)}}_{{t}}" 
             ng-pattern="regexText" 
             ng-model="empKeys[emp.indexOf(empId)][t]" 
             style="width: 100%;height:30px;" 
             placeholder="please enter val here......">
      <div ng-messages="employees['textVal_' + emp.indexOf(empId) + '_' + t].$error">
        <div ng-message="pattern">Invalid Text</div>
      </div>
    </td>
  </tr>
</form>

关键修改点说明 #

• 动态生成name属性：把name="textVal"改成name="textVal_{{emp.indexOf(empId)}}_{{t}}"，这样每个输入框的name会变成类似textVal_0_0、textVal_0_1这种唯一值，彻底区分开每个输入框。
• 调整ng-messages的目标控件：因为name变成了动态字符串，不能再用.语法访问表单控件，改用方括号语法employees['textVal_' + emp.indexOf(empId) + '_' + t].$error，这样能正确匹配到对应输入框的校验状态。
• 修正id属性：原来的id="row" {{t}}写法是无效的，改成id="row_{{emp.indexOf(empId)}}_{{t}}"保证每个tr的id也是唯一的，避免DOM元素id重复的问题。

额外注意事项 #

要确保你的表单元素上设置了name="employees"，因为代码里的employees是表单的引用，只有表单有name属性，才能通过employees.控件name的方式访问输入框的校验状态哦。

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