javascript - AngularJS 嵌套 ng-repeat

Question

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

我的页面:

<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]" .

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

<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

<小时/>

为了更好地理解 Angular 范围的工作原理，我建议阅读以下内容:https://github.com/angular/angular.js/wiki/Understanding-Scopes