javascript - angularJs ng-repeat 使用相同的名称进行输入并将此输入标记为无效

Question

我在 ng-repeat 指令中使用以下控件:

<input type="number" name="pcSplit"
   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)"
   data-accuracy="2"
   ng-if="(currentItem.splitType !==1)" />

我的问题是，如果总数超过一定数量，我想将要保留的元素的有效性设置为 false。我正在传递 $event 和 $event.target或$event.currentTarget似乎指向我的 DOM 元素，但它没有 $setValidity我正在使用的方法。如果我只使用控件的名称，那么最后一个控件将被设置为无效。如果我在 ng-repeat 中将它们命名为相同的元素，有没有办法获取该元素循环？

这是我当前的代码，不起作用

let element = event.target; // DOM element

if (element.value.length === 0) {
  element.value = "0.00";
}

if ($scope.currentItem.splitType === 2) {
  total = getProfitCenterTotal($scope.currentItem);                

  if ($scope.form.editItemProfitCenterForm.profitCenters.pcSplit) {
    if (total <= $scope.currentItem.monday0) {
        element.$setValidity("total", true);
    } else {
        element.$setValidity("total", false);
    }
  }

我猜我的控件可能需要不同的名称，这会使 HTML 中的代码稍微复杂一些。

Answer 1

据我所知，您不能在元素上使用 $setValidity 。您是正确的，您应该使用不同的名称，但这并不一定会使您的代码变得复杂。

我建议使用 ng-repeat 的 $index 参数来设置名称，使其唯一，而不是从元素中检索该名称并在表单模型中查找您的输入。

HTML 中需要的更改:

<input type="number" name="pcSplit{{$index}}"

Controller 中需要的更改:

if ($scope.form.editItemProfitCenterForm.profitCenters[element.name]) {
   if (total <= $scope.currentItem.monday0) {
      $scope.form.editItemProfitCenterForm.profitCenters[element.name].$setValidity("total", true);
   } else {
      $scope.form.editItemProfitCenterForm.profitCenters[element.name].$setValidity("total", false);
   }
}

希望这对你有用:)