ng-repeat execution forces input to lose focus

Question

I have an input that is created using ng-repeat

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

I want this to prepopulate the inputs with the values that are in currentQuestion['possible_answers'] and I also want any changes to bind to this variable as well.

However, everytime I start typing into one of these text fields, I type one letter and then it looses focus of the input box. I have a feeling that this is because I start typing and the data bidning updates currentQuestion. Because currentQuestion is updated, the ng-repeat is executed again.

Is there a way to make the ng-repeat action a one off action isntead of constantly revalutating?

Answer 1

Yes (looking at the symptoms, you did not show us the data) your issue could be because your model is the text in the array that you (may have), so whenever you update the model, it will trigger digest cycle since ng-repeat is tracked by the text. You can easily fix this by providing. track by $index, so that the ng-repeat is watched over and repeat watch gets updated only when the array changes in its length.

 <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

You can also use $index to get the array's index. you do not need to iterate with (key, value).

However i would just make my answer array an array of objects and get rid of all these issues, and it would just be (_note the usage of $index and 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