Question

我有包含问题和选择列表的对象。我使用嵌套的ng-repeats在页面上显示此对象。当我试图改变“问题”时一切都改变得很好，但是当我试图改变选择时＃39;什么都没发生。问题在哪里？

我的页面：

<div class="panel">

<div class="row">

    <div class="large-12 columns">

        <h3>{{ title }}</h3>

            <ol>
                <li ng-repeat="q in quiz">
                    <input type="text" ng-model="q.question">
                    <ul class="remove-li-dots">
                        <li ng-model="choice" ng-repeat="choice in q.choices">
                            <input type="text" ng-model="choice" name="answer{{ q.id }}" >
                        </li>
                    </ul>
                    </br>
                </li>
            </ol>
            <a class="button" ng-click="submitQuiz()">Submit</a><br>
            {{ quiz }}
    </div>

</div>

页面截图：

https://www.dropbox.com/s/i52fwq1os0cvcr9/repeat.png?dl=0

Answer 1

问题是choice是一个字符串，所以当你在子范围内更改它时，它只在子范围内改变。

要解决此问题 - 请按数组ng-repeat="(choiceIndex,choice) in q.choices，ng-model="q.choices[choiceIndex]"中的索引引用它。

另外，为了防止输入在更改项目时失去焦点 - 您需要在ng-repeat指令中添加track by $index。

<ol> <li ng-repeat="q in quiz"> <input type="text" ng-model="q.question"> <ul class="remove-li-dots"> <li ng-model="choice" ng-repeat="(choiceIndex,choice) in q.choices track by choiceIndex"> <input type="text" ng-model="q.choices[choiceIndex]" name="answer{{ q.id }}"> </li> </ul> </li> </ol>

工作示例： http://plnkr.co/edit/GJacjkzfT4FpfC6szsNk?p=preview

为了更好地理解角度范围的工作原理，我建议您阅读：https://github.com/angular/angular.js/wiki/Understanding-Scopes

AngularJS嵌套ng-repeat

1 个答案: