我想要做的前提是建立一个简单的Q& A系统,一次只显示一个问题。在给出每个答案之后,会出现另一个问题,直到$ scope.quiz用完为止。
到目前为止,它正确显示了问题,并将问题和答案附加到数组$ scope.answers。
我需要以某种方式知道并限制问题何时用尽,以便我可以准备结果页面。我认为这应该在范围而不是模板中完成,但我不确定如何实时观察$ scope.answers数组,所以我知道它何时触及它的最后一个问题,然后从那里如何替换问题div有一些结果。
如果有任何帮助,我将不胜感激。
谢谢
<div id="q" class="cta1_content ugh" ng-controller="testYourself">
<div ng-init="count=0">
<div ng-repeat="data in quiz" ng-show="data.id==count">
<h2 class="text-center">{{data.name}}</h2>
<div class="col-xs-6 col-md-3 col-md-offset-3 text-center yesno">
<a href="#dropdown" class="q" ng-click="$parent.count=$parent.count+1;addAnswer(count, 1)">
<span class="cta_next"><i class="icon ion-checkmark-round"></i></span>
</a>
</div>
<div class="col-xs-6 col-md-3 text-center yesno">
<a href="#dropdown" class="q" ng-click="$parent.count=$parent.count+1;addAnswer(data.id, 0)">
<span class="cta_next"><i class="icon ion-close-round"></i></span>
</a>
</div>
</div>
</div>
</div>
app.controller('testYourself', ['$scope', function($scope) {
$scope.quiz = [
{id:0, name:"q1", answer: [{0: 'a1', 1: 'a2'}], weight:25},
{id:1, name:"q2", answer: [{0: 'a1', 1: 'a2'}], weight:25},
];
$scope.answers = [];
$scope.addAnswer = function(q, a) {
$scope.answers.push({'question':q, 'answer':a});
};
}]);
答案 0 :(得分:0)
我只需用以下内容替换你的addAnswer问题:
$scope.switchToResults = false;
$scope.proceeed = function(q, a) {
$scope.answers.push({'question':q, 'answer':a});
if ($scope.answers.length === $scope.quiz.length) {
switchToResults = true;
// do some business logic to process results
}
}
将ng-if="!switchToResults"
添加到您的测验div,并ng-if="!switchToResults"
添加到您的结果div。