【发布时间】:2015-03-11 06:24:51
【问题描述】:
我刚刚进入 angularJS,对于我的第一个项目,我正在尝试构建一个测验创建器。我希望人们能够创建结果、问题、答案以及结果答案的加权映射。我的 html 看起来像这样:
<div ng-controller="QuizCtrl">
<div class="result" ng-repeat="result in quiz.results">
<input ng-model="result.title" /> [<a href ng-click="quiz.results.splice($index, 1)">X</a>]<br />
</div>
<div class="question row" ng-repeat="question in quiz.questions">
<div class="col-sm-4 col-md-4 col-lg-4">
<input ng-model="question.title" /> [<a href ng-click="quiz.questions.splice($index, 1)">X</a>]<br />
<a href ng-click="addAnswer($index)">add answer</a>
</div>
<div class="col-sm-8 col-md-8 col-lg-8">
<div class="answer" ng-repeat="answer in question.answers">
<input ng-model="answer.title" /> [<a href ng-click="question.answers.splice($index, 1)">X</a>]<br />
<div class="answerresult" ng-repeat="answerresult in answer.answerresults">
{{ quiz.results[$index].title }}:
<select ng-change="answerresult.result = $index" ng-model="answerresult.weight" ng-options="i for i in [1,2,3]"></select>
</div>
</div>
</div>
</div>
</div>
底层数据结构如下所示:
angular.module('testApp')
.controller('QuizCtrl', function ($scope) {
$scope.quiz = {
questions: [
{title: 'question 1', answers: [
{title: 'answer 1', answerresults:[
{'result': 0, weight: 2},
{'result': 1, weight: 3}
]},
{title: 'answer 3', answerresults:[
{'result': 0, weight: 2},
{'result': 1, weight: 2}
]}
]},
{title: 'question 2', answers: [
{title: 'answer 1', answerresults:[
{'result': 0, weight: 1},
{'result': 1, weight: 2}
]},
{title: 'answer 2', answerresults:[
{'result': 0, weight: 2},
{'result': 1, weight: 2}
]},
{title: 'answer 3', answerresults:[
{'result': 0, weight: 1},
{'result': 1, weight: 3}
]}
]}
],
results: [
{title: 'result 1'},
{title: 'result 2'}
],
};
});
现在我的问题:
- 如何在向“$scope.quiz.results”添加或删除新项目时更新每个“$scope.quiz.questions[x].answers[y].answerresults”数组?当然可以使用嵌套的 for 循环,但这不是很优雅。有没有更好的方法使用角度双向数据绑定?
- 如何表示“$scope.quiz.questions[x].answers[y].answerresults[z].result”和“$scope.quiz.results[i]”之间的关系?现在我只是这样设置: ng-change="answerresult.result = $index" 常见做法?或者有没有更好的方法?
- 与其迭代“$scope.quiz.questions[x].answers[y].answerresults”,也许它可以迭代“$scope.quiz.results”,然后以某种方式动态地为每个回答?
提前感谢您的回答,如果这是一个愚蠢的问题,我们深表歉意。我昨天刚开始研究 Angular..
【问题讨论】:
标签: javascript angularjs data-structures 2-way-object-databinding