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

問題是選擇是一個字符串，因此在子范圍內更改它時，它僅在子范圍內更改。

要解決此問題，請通過ng-repeat="(choiceIndex,choice) in q.choices數組中的索引來引用它， ng-model="q.choices[choiceIndex]" 。

另外，為防止更改項目時輸入失去焦點-您將需要在ng-repeat指令中track by $index添加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