Question

我有一个显示多个条目的表格，每个条目都有一个<input>。用户可以通过单击“添加条目”按钮动态添加其他输入。我需要在保存并验证每个之前迭代它们。我简化了我的示例，检查每个输入的值是否大于100（最终我将使用模式匹配来验证MAC和IP地址）。

如果我可以选择所有<input>，我可能会处理它，但我真的想使用我在我的范围内已有的索引来选择特定的<input>。我读到angular.element是一种方式，但我需要选择一些动态创建的东西，因此不像id="myInput"那样容易命名。除非我使用“输入”的id并在id属性中附加Angular的$ index的唯一数字？

Here是我的小提琴，展示了我正在做的事情。第44行是if()，应检查是否有<input>大于100.“保存行”按钮验证输入是否大于100，但如果您编辑一行，我需要“保存“按钮以验证用户编辑过的任何内容（通过单击旁边的编辑）。

TL; DR：如何使用Angular选择动态创建的<input>？

Answer 1

您可以为要验证的输入使用自定义类。然后，您可以选择该类的所有输入并验证它们。请参阅此小提琴https://jsfiddle.net/lealceldeiro/L38f686s/5/

$scope.saveEverything = function() {
  var inputs = document.getElementsByClassName('inputCtrl'); //inputCtrl is the class you use to select those input s you want to validate
  $scope.totalInputs = inputs.length;
  $scope.invalidCount = 0;
  for (var i = 0; i < inputs.length; i++){
    if(inputs[i].value.length < 100){
     $scope.invalidCount++;
    }
  }
   //do your stuff here
}

在第46行，a获取所有输入的类＆＃34; classCtrl＆＃34;然后我通过输入s数组来检查它们的长度。

在那里你可以检查它们中的任何一个是否真的无效（按长度或任何其他限制）

Answer 2

我已经以干净的方式更新了您的小提琴，以便您可以在通用方法中为add＆amp; amp;编辑。

function validateBinding(binding) {
     // Have your pattern-match validation here to validate MAC and IP addresses
     return binding.ip > 100;
}

更新小提琴：

https://jsfiddle.net/balasuar/by0tg92m/27/

此外，我已修复当前编辑问题，您必须允许多次编辑而不保存第一行时单击下一行的下一个编辑。

“保存一切”的验证现在更加清晰，如下所示。

$scope.changeEdit = function(binding) {
    binding.onEdit = true;
    //$scope.editNum = newNum;
    $scope.showSave = true;
  };

$scope.saveEverything = function() {
    var error = false;
    angular.forEach($scope.macbindings, function(binding) {
       if(binding.onEdit) {
          if (validateBinding(binding)) {
             binding.onEdit = false;
          } else {
             error = true;
          }
       }
    });

    if (error) {
      alert("One/some of the value you are editing need to be greater than 100");
    } else {
      $scope.showSave = false;
    }
  }

你可以检查更新的小提琴，

https://jsfiddle.net/balasuar/by0tg92m/27/

注意：在使用angular时，您可以像上面一样验证模型，无需检索和循环验证的输入元素。同样适用于您的情况，验证模型就足够了。

如果您需要一些高级验证，则应创建自定义 directive。因为，玩弄里面的元素 AngularJS中不推荐使用controller。

使用AngularJS验证动态创建的“input”元素

2 个答案: