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)进行迭代。

但是我只是让我的答案数组成为一个对象数组并摆脱所有这些问题，它只会（_note使用$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>

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

2 个答案: