AngularJS 1.8.2中ng-repeat内ng-if仅当前迭代生效的实现

要实现仅显示当前迭代输入框的验证错误，无需额外JavaScript代码，可利用AngularJS表单控件的动态命名特性来实现：

1. 为每个ng-repeat内的输入框设置动态唯一的name属性
   借助$index为每个输入框生成唯一名称，确保表单能区分不同项的控件状态。

2. 通过表单对象的方括号语法访问单个控件的验证状态
   AngularJS的表单对象（如CartForm）以控件name为键存储状态，动态生成的名称无法通过点语法访问，需用方括号语法CartForm['动态名称']获取对应控件的验证对象。

完整示例代码 #

<form name="CartForm">
  <div ng-repeat="item in cartItems">
    <div>{{item.productName}}</div>
    <label>购买数量：</label>
    <input type="number"
           name="cartItem_{{$index}}"
           ng-model="item.quantity"
           ng-max="item.maxQuantity"
           min="1"
           required>
    <!-- 通用错误提示 -->
    <span ng-if="CartForm['cartItem_{{$index}}'].$invalid" style="color: red;">
      输入的数量不符合要求
    </span>
    <!-- 精准错误提示（可选） -->
    <span ng-if="CartForm['cartItem_{{$index}}'].$error.max" style="color: red;">
      数量不能超过 {{item.maxQuantity}}
    </span>
    <span ng-if="CartForm['cartItem_{{$index}}'].$error.min" style="color: red;">
      数量不能小于1
    </span>
    <span ng-if="CartForm['cartItem_{{$index}}'].$error.required" style="color: red;">
      数量不能为空
    </span>
  </div>
</form>

关键说明 #

• 动态name属性name="cartItem_{{$index}}"确保每个输入框在表单中拥有唯一标识，不会互相干扰
• 使用CartForm['cartItem_{{$index}}'].$invalid仅判断当前输入框的整体验证状态，只会在当前项输入无效时显示错误
• 若需要更精准的错误提示，可直接访问控件的$error子属性（如$error.max、$error.required），针对不同验证规则显示对应提示

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