нг-повтор силы исполнения вход потерять фокус

Question

У меня есть вход, который создается с помощью нг-повторить

<div data-ng-repeat="(index, answer) in currentQuestion['possible_answers']" class="form-group"> 
     <label class="col-md-3 control-label">Answer {{ index + 1 }}</label> 
     <div class="col-md-8"> 
      <div class="input-icon"> 
       <i class="fa fa-sun-o"></i> 
       <input data-ng-model="currentQuestion['possible_answers'][index]" type="text" class="form-control" > 
      </div> 
     </div> 
    </div> 

Я хочу, чтобы это предварительно заполнить входы со значениями, которые находятся в currentQuestion['possible_answers'], и я также хочу каких-либо изменений для привязки к этой переменной.

Однако каждый раз, когда я начинаю вводить текст в одно из этих текстовых полей, я набираю одну букву, а затем теряет фокус ввода. У меня такое ощущение, что это происходит потому, что я начинаю печатать и обновлять данные currentQuestion. Поскольку обновляется currentQuestion, снова выполняется ng-repeat.

Есть ли способ сделать действие ng-repeat одним действием, постоянно пересматривающим?

Answer 1

Да (looking at the symptoms, you did not show us the data) Ваш вопрос может быть потому, что ваша модель является текст в массиве, (может иметь), поэтому при обновлении модели, она будет срабатывать переваривать цикл, так как нг-повтор отслеживается текст. Вы можете легко исправить это, предоставив. track by $index, так что просмотр ng-repeat просматривается, и повторное воспроизведение часов обновляется только тогда, когда массив изменяется по длине.

<div data-ng-repeat="answer in currentQuestion['possible_answers'] track by $index" class="form-group"> 
    <label class="col-md-3 control-label">Answer {{ $index + 1 }}</label> 
    <div class="col-md-8"> 
     <div class="input-icon"> 
      <i class="fa fa-sun-o"></i> 
      <input data-ng-model="currentQuestion['possible_answers'][$index]" type="text" class="form-control" > 
     </div> 
    </div> 
</div> 

Demo

Вы также можете использовать $index, чтобы получить индекс массива. вам не нужно перебирать (key, value).

Однако я бы просто сделать мой массив ответов массивы объектов и избавиться от всех этих проблем, и это будет просто (_Примечание использования $index и ng-model): -

<div data-ng-repeat="answer in currentQuestion['possible_answers'] track by $index" class="form-group"> 
    <label class="col-md-3 control-label">Answer {{ $index + 1 }}</label> 
    <div class="col-md-8"> 
     <div class="input-icon"> 
      <i class="fa fa-sun-o"></i> 
      <input data-ng-model="answer.text" type="text" class="form-control" > 
     </div> 
    </div> 
</div> 

Demo

Answer 2

ng-repeat создает новый охват для каждого элемента в списке. В этой области он знает index и answer. Вы привязываете значение ввода к чему-то вне области видимости, а именно к тому же элементу массива. Изменение этого параметра вызывает перерисовку списка, что приводит к тому, что входной сигнал блокируется.

<div data-ng-repeat="(index, answer) in currentQuestion['possible_answers']" class="form-group"> 
    <label class="col-md-3 control-label">Answer {{ index + 1 }}</label> 
    <div class="col-md-8"> 
    <div class="input-icon"> 
     <i class="fa fa-sun-o"></i> 
     <input data-ng-model="answer" type="text" class="form-control" > 
    </div> 
    </div> 
</div>