Угловое изменение ввода текстового поля JS - Watch

Question

У меня есть список текстовых полей с пустым текстовым полем в конце, привязанным к массиву. Мне нужно обнаружить текстовую запись в пустое текстовое поле, поэтому, когда пользователь начнет вводить значение, я добавляю еще один пустой элемент в массив, чтобы у пользователя всегда было другое поле, готовое для работы.

Должен ли я использовать $ watch или ng-change, чтобы увидеть изменение, и добавить элемент соответственно? Я знаю, что $ watch всегда стреляет, поэтому кажется, что это может быть плохой вариант.

<div ng-repeat="variation in productEditorModel.ColorVariations"> 
               <div class="form-inline"> 
                <input type="text" id="txtVariationName" placeholder="Name" name="variationName" ng-model="variation.VariationName" required class="form-control"> 

                </div> 
              </div> 

Answer 1

Учитывая аспект производительности, вы должны лучше использовать ng-change, потому что он будет работать, как вы добавили изменения слушателя на входе, как $('input').change(...) так же, как вы упомянули.

Учитывая аспекты UX и функциональности, лучше всего просто использовать $scope.$watch('model', ...) в контроллере.

Но все же, я полагаю, это зависит от того, сколько у вас будет ресурсов. Я думаю, что нет никакой большой разницы с даже более 100 входами, потому что вы просто сравниваете строки, я не думаю, что пользователь будет бороться с задержками по мере их ввода.

Answer 2

Почему бы вам не привязать массив к ng-повторению входных элементов? Таким образом, привязка будет работать автоматически.

Answer 3

спасибо за ввод, ng-change работал лучше всего.

ng-change="update(variation,$index);" 

    $scope.update = function (variation, index) { 
     if (!angular.isUndefined(variation.VariationName)) { 
      if (variation.VariationName.length > 0) { 
       $scope.addVariation(variation.VariationTypeId); 
      } else { 
       $scope.productEditorModel.ColorVariations.splice(index, 1); 
       $scope.removeVariation(index, variation.VariationTypeId); 
      } 
     } else { 
      $scope.removeVariation(index, variation.VariationTypeId); 
     } 
    }