how to add timeout to ng-show in angular js?

Question

I am working on quiz app. I have add the time out to every question even though user attempts the question or not.

my code in view:

<p ng-repeat="opt in question.answer">      
    <label ng-show="opt._correct" for="">
    <input type="radio" name="questionAnswer" id="opt.id" value="" 
        ng-click="checkAnswer(1)" />
    {{opt.__text}}
    </label>
    <label ng-hide="opt._correct" for="">
    <input type="radio" name="questionAnswer" id="opt.id" value="" 
        ng-click="checkAnswer(0)" />
    {{opt}}
   </label>
</p>

my code in controller:

$scope.randomQuestions = function(questionslist){

    $scope.randomQuestion = questionslist
            [Math.floor(Math.random() * questionslist.
                length)];
            console.log($scope.quiz);
            var item = $scope.quiz.splice($scope.randomQuestion,1)[0];
        $scope.questions = new Array();
        $scope.questions.push($scope.randomQuestion);
                    $scope.counter = $scope.counter + 1;
        return $scope.questions;

}

$scope.checkAnswer = function(option){
        console.log('check answer');

        if(option == 1){
            console.log($scope.score);
            $scope.score = $scope.score + parseInt($scope.level._points_per_question);
             console.log($scope.score);
        } else{

        }
        console.log($scope.counter);
        if ($scope.counter < parseInt($scope.level._total_questions + 1)){
            $scope.randomQuestions($scope.quiz);
        } else {
            console.log('5 questions');
        }

}

$scope.nextLevel = function(){
    $scope.total_score = $scope.total_score + $scope.score;
    $scope.score = 0;
    $scope.counter = 0;
    if($scope.level_count == 1){
        $scope.level_count = $scope.level_count + 1;
        $scope.quiz = $scope.quiz2.question;
        $scope.level = $scope.quiz2;
        $scope.randomQuestions($scope.quiz);
    } else if($scope.level_count == 2){
        $scope.quiz = $scope.quiz3.question;
        $scope.level = $scope.quiz3;
        $scope.randomQuestions($scope.quiz);
        $scope.level_count = $scope.level_count + 1;
    } else {
        $scope.level_count = $scope.level_count + 1;
        $scope.result_text();
    }

}

  $scope.result_text = function(){

    $scope.result = parseInt(($scope.total_score * 100) / 400);
    for(var k=0; k < $scope.score_rules.length; k++){
        if($scope.result >= $scope.score_rules[k]._min_percent){
            $scope.score_status = $scope.score_rules[k].__text;
            console.log($scope.score_rules[k].__text);
            console.log($scope.score_rules[k]);
        }

    }
}

Can any one suggest how to call time out from view?

Answer 1

Please find below the code

 function controller($scope) 
 {
   $scope.showflag = true;
   setTimeout(function () 
   {
     $scope.$apply(function()
     {
       $scope.showflag = false;
     });
   }, 1000);
 }

Answer 2

You can try this approach:

• Modify your checkAnswer() code and call another function which sets the timeout/sleep. When the call returns from the timeout function, set a variable (eg. isVisible) to false and use this variable in ng-show. Something like this:

• So, new ng-show would look like ng-show=" isVisible && opt._correct"

Answer 3

You could use CSS transitions or animation to do the actual transition and use ngAnimate to trigger the transitions.

There are a few examples for ngAnimate on this page.