在angularjs范围内观察和限制数组的大小

时间:2014-10-02 10:34:34

标签: angularjs angularjs-scope

我想要做的前提是建立一个简单的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});
 };
}]);

1 个答案:

答案 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。