forze esecuzione ng-repeat ingresso perdere la concentrazione

Question

ho una sorgente che sia creata usando ng-ripetere

<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> 

voglio questo per precompilare ingressi con i valori che sono in currentQuestion['possible_answers'] e voglio anche eventuali modifiche legare anche a questa variabile.

Tuttavia, ogni volta che si inizia a digitare in uno di questi campi di testo, si digita una lettera e quindi si perde lo stato attivo della casella di input. Ho la sensazione che questo sia dovuto al fatto che inizio a digitare e agli aggiornamenti di offerta dati currentQuestion. Poiché currentQuestion viene aggiornato, lo ng-repeat viene eseguito nuovamente.

C'è un modo per rendere l'azione ng-repeat un'azione non off di costante rivalutazione?

Answer 1

Sì (looking at the symptoms, you did not show us the data) il problema potrebbe essere perché il vostro modello è il testo nella matrice che è (potrebbe essere), quindi ogni volta che si aggiorna il modello, si innescherà digerire ciclo dal ng-repeat viene monitorato dal testo. Puoi facilmente risolvere questo fornendo. track by $index, in modo che la ripetizione ng sia sorvegliata e la ripetizione dell'orologio viene aggiornata solo quando l'array cambia nella sua lunghezza.

<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

È inoltre possibile utilizzare $index per ottenere l'indice della matrice. non è necessario eseguire iterazioni con (key, value).

Tuttavia vorrei solo fare il mio allineamento risposta un array di oggetti e di sbarazzarsi di tutti questi problemi, e sarebbe solo (_Nota l'utilizzo di $index e 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

Il ng-repeat crea un nuovo ambito figlio per ogni elemento nell'elenco. In questo ambito conosce index e answer. Si lega il valore dell'input a qualcosa al di fuori dell'ambito, vale a dire lo stesso elemento nell'array. Modificandolo si innesca la lista da ridisegnare, il che fa perdere l'attenzione all'input.

<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>