Question

我正在尝试迭代questions数组。但我需要在每个问题上附上单选按钮的答案。在这种情况下，我需要为每个答案添加不同的ng-model s。我尝试了下面的代码，但它没有用。

这是使用$index

的ng-repeat的正确方法吗？

<li class="fields" ng-repeat="question in questions">
    <p>question:{{question.title}}</p>
    <div class="radio-buttons">
        <input type="radio" id="radio01" value="0" ng-model="answer[$index]" checked="checked"/>
        <label for="radio01"><span></span>Yes</label>
        <input type="radio" id="radio02" value="1" ng-model="answer[$index]"/>
        <label for="radio02"><span></span>No</label>
    </div>
</li>

Answer 1

你需要这样做modelname{{$index}}

 <li class="fields" ng-repeat="question in questions">
        <p>question:{{question.title}}</p>
        <div class="radio-buttons">
            <input type="radio" id="radio01" value="0" ng-model="answer{{$index}}" checked="checked"/>
            <label for="radio01"><span></span>Yes</label>
            <input type="radio" id="radio02" value="1" ng-model="answer{{$index}}"/>
            <label for="radio02"><span></span>No</label>
        </div>
    </li>

Answer 2

你也可以通过方括号表示法做到这一点，如果这更符合美学：

<li class="fields" ng-repeat="(i, question) in questions">
  <p>question:{{question.title}}</p>
  <div class="radio-buttons">
    <input type="radio" id="radio01" value="0" ng-model="answer[i]" checked="checked"/>
    <label for="radio01"><span></span>Yes</label>
    <input type="radio" id="radio02" value="1" ng-model="answer[i]"/>
    <label for="radio02"><span></span>No</label>
  </div>
</li>

另外需要注意的是，当表示为点模型时，模型会更好。例如：

<input type="radio" ng-model="answer[i]" />

会更好：

<input type="radio" ng-model="models.answer[i]" />

然后在你的控制器中，这使得通过对象'模型'列出所有模型变得简单，而不是找出有多少回答[i]模型。

如何使用ng-repeat和$ index创建动态输入

2 个答案: