ng-repeat 执行强制输入失去焦点

Question

我有一个使用 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>

我希望它使用 currentQuestion['possible_answers'] 中的值预填充输入，并且我还希望任何更改都绑定到此变量。

但是，每次我开始在其中一个文本字段中输入内容时，我都会输入一个字母，然后它就会失去输入框的焦点。我有一种感觉，这是因为我开始打字并且数据竞价更新currentQuestion。因为currentQuestion更新了，ng-repeat又被执行了。

有没有办法让ng-repeat 操作成为一次性操作，而不是不断重新评估？

Answer 1

是的 (looking at the symptoms, you did not show us the data) 你的问题可能是因为你的模型是你（可能有）数组中的文本，所以每当你更新模型时，它都会触发摘要循环，因为 ng -repeat 由文本跟踪。您可以通过提供轻松解决此问题。 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>