Использование AngularJS для проверки динамически созданного элемента «input»

Question

У меня есть таблица, которая отображает несколько записей, каждая из которых имеет <input>. Пользователь может динамически добавлять дополнительные входы, нажав кнопку «добавить запись». Мне нужно повторить их, прежде чем сохранять и проверять каждый. Я упростил свой пример, чтобы проверить, что значение каждого входа больше 100 (в конечном итоге я буду использовать сопоставление шаблонов для проверки MAC и IP-адресов).

Возможно, я смогу обработать его, если бы я мог выбрать все <input>, но я бы очень хотел, чтобы выбрать конкретный <input> с помощью индекса, который у меня уже есть в моем объеме. Я читал, что angular.element - это способ, но мне нужно выбрать что-то, что было динамически создано, и поэтому не названо так просто, как id="myInput". Если я не использую идентификатор «ввода» и не добавлю уникальный номер с индексом Angular's в атрибуте id?

Here - это моя скрипка, которая показывает, что я делаю. Строка 44 - это номер if(), который должен проверить, больше ли <input>. Кнопка «Сохранить строку» подтверждает, что вход больше 100, но если вы редактируете строку, мне нужна кнопка «Сохранить», чтобы проверить, пользователь отредактировал (нажав «Изменить» рядом с ним).

tl; dr: Как я могу использовать Angular для выбора <input>, который был создан динамически?

Answer 1

Я обновил свою скрипку в чистом виде, так что вы можете поддерживать проверку в обобщенном методе как добавить & Редактировать.

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/

Примечание: Как вы используете угловые, вы можете проверить модель, как указано выше, и нет необходимости для извлечения и петли входные элементы для проверки. Также для вашего случая достаточно проверить модель.

Если вам нужны некоторые дополнительные проверки, вы должны создать пользовательский directive. Так как, играя с элементами внутри controller, не рекомендуется в AngularJS.

Answer 2

Вы можете использовать пользовательский класс для тех входов, которые вы хотите проверить. Затем вы можете выбрать все эти входы с этим классом и проверить их. Смотрите эту скрипку 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 получить все входы с классом «classCtrl», а затем я иду через массив на входе • для того, чтобы проверить их длину.

Там вы можете проверить, если любой из них на самом деле недействителен (по длине или любому другому ограничению)