AngularJS：ng-repeat中同名input元素的有效性动态设置问题

针对你的需求，我们可以利用AngularJS的ngModelController和$setValidity方法来实现：当计算得到的总和超过指定数值时，标记当前离开的输入框为无效状态。下面是具体的实现步骤和代码示例：

1. 调整输入框的name属性（关键！） #

由于你是在ng-repeat中渲染输入框，每个输入框需要唯一的name属性，这样表单才能正确跟踪每个控件的验证状态。修改输入框代码，把name="pcSplit"改为动态的name="pcSplit{{n}}"，同时给外层表单添加一个name（比如splitForm）：

<form name="splitForm">
  <div ng-repeat="... track by $index" ng-init="n = $index">
    <input 
      type="number" 
      name="pcSplit{{n}}" <!-- 动态生成唯一name -->
      ng-model="currentItem['pcSplit'+n]" 
      class="form-control" 
      min="0" 
      ng-max="currentItem.monday0" 
      data-sm:number 
      data-sm:number-format 
      ng-disabled="currentItem['prCtr'+n]===0" 
      ng-blur="calculateTotalFlatAmount($event, n)" <!-- 传入n方便定位控件 -->
      data-accuracy="2" 
      ng-if="(currentItem.splitType !==1)" 
    />
    <!-- 显示超限错误提示 -->
    <span ng-show="splitForm['pcSplit'+n].$error.totalExceeded" class="text-danger">
      总和已超过限制值，请调整！
    </span>
  </div>
</form>

2. 实现calculateTotalFlatAmount方法 #

在你的AngularJS控制器中，编写处理blur事件的方法，核心是获取当前输入框的ngModelController，计算总和后调用$setValidity标记有效性：

$scope.calculateTotalFlatAmount = function(event, n) {
  // 1. 获取当前输入框的ngModel控制器
  const inputEl = angular.element(event.target);
  const ngModel = inputEl.controller('ngModel');
  
  if (!ngModel) return; // 防止意外情况
  
  // 2. 计算所有相关输入框的总和（根据你的实际数据结构调整）
  let total = 0;
  // 假设你需要累加currentItem下的pcSplit0、pcSplit1...字段
  for (let i = 0; i < /* 你的循环上限，比如items.length */; i++) {
    const value = $scope.currentItem['pcSplit' + i];
    // 过滤非数值的情况
    if (!isNaN(value) && value != null) {
      total += parseFloat(value);
    }
  }
  
  // 3. 定义你的限制数值（替换成你实际的阈值）
  const maxAllowed = 100; // 示例值，可改为动态获取的数值
  
  // 4. 设置输入框的有效性状态
  if (total > maxAllowed) {
    // 标记为无效，错误类型为自定义的'totalExceeded'
    ngModel.$setValidity('totalExceeded', false);
  } else {
    // 恢复有效状态
    ngModel.$setValidity('totalExceeded', true);
  }
};

关键知识点解释 #

• ngModelController：AngularJS为每个绑定了ngModel的控件提供这个控制器，用来管理控件的验证状态、值的格式化等。我们通过angular.element(event.target).controller('ngModel')获取它。
• $setValidity方法：第一个参数是自定义的错误类型（比如这里的totalExceeded），第二个参数是布尔值，表示控件是否有效。一旦设为false，控件的$invalid状态会变为true，同时$error.totalExceeded会被标记为true。
• 表单控件状态访问：通过表单name + 控件name的方式（比如splitForm['pcSplit'+n]）可以访问到每个输入框的验证状态，从而在页面上显示对应的错误提示。

额外注意事项 #

• 如果你的总和计算逻辑涉及其他数据源（比如不是currentItem下的字段），请调整总和计算的循环逻辑。
• 若需要在用户输入过程中实时验证（而非仅在blur时），可以把逻辑移到ng-change事件中。
• 确保currentItem的数据结构正确，能正常获取到pcSplit0、pcSplit1等字段的值。

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