Mean stack application : can't hide content using directive “ng-hide'”

Question

I'm making a mean stack application but got stuck on a problem! I try to hide all the content after the 10th question is asked. I use the directive ng-hide which is set to true when I reach the 10th question! here is the code :

<body>
    <div ng-hide="quizend" class="ng-hide">
    <div class="container" ng-controller="questionController">
    <button ng-hide="quizzstarted" class="btn btn-warning btn-lg" ng-click="startQuizz()">Start Quizz</button>

    <form ng-show="quizzstarted">
        <h1>{{currentQuestion}}</h1>
        <div>{{question}}</div>
        <button class="btn btn-success btn-lg" ng-click="clickYes()">JA</buztton>
        <button class="btn btn-danger btn-lg" ng-click="clickNo()">NEE</button>
         <p ng-show="visibility">
            <button class="btn btn-information btn-lg" ng-click="nextAnswer(1)">1</button>
            <button class="btn btn-information btn-lg" ng-click="nextAnswer(2)">2</button>
            <button class="btn btn-information btn-lg" ng-click="nextAnswer(3)">3</button>
            <button class="btn btn-information btn-lg" ng-click="nextAnswer(4)">4</button>
            <button class="btn btn-information btn-lg" ng-click="nextAnswer(5)">5</button>
         </p>
    </form>


    </div>
</div>

and now the js controller code:

angular.module('app').controller('questionController', ['$scope', '$http','$location', function ($scope, $http, $location){
    $scope.currentQuestion = '';
    $scope.quizzstarted = false;
    $scope.isnextStep = false;
    $scope.message= "it works"; 

    $scope.startQuizz = function (){            
        $scope.quizzstarted = true;
        $scope.quizend=false;
        $scope.getQuestionByID(1);
    }

    $scope.getQuestionByID = function (id){
        $http.get('/api/questions/' + id).success(function(data) {
            $scope.currentQuestion = data.id;
            questionid = data.id;
            $scope.question = data.question;
        });
    }

    $scope.clickYes = function() {
        if ($scope.visibility==false || $scope.visibility==null)
        {
            $scope.visibility=true;
        }
        else if ($scope.visibility==true)
        {
            $scope.visibility=false;
        }   
    }

    $scope.clickNo = function(){

        var answer = {
            qid : $scope.currentQuestion,
            answer : "No",
            nextanswer:""           
        };
        checkEnding();
        sendAnswer(answer);
    }

    $scope.nextAnswer = function(weight){
        var answer = {
            qid : $scope.currentQuestion,
            answer : "Yes",
            nextanswer: weight
        };
        checkEnding();
        sendAnswer(answer);
        $scope.visibility = false;
    }

    var sendAnswer = function (answer){

        $http.post('/api/questions', answer).success(function(data){
        $scope.currentQuestion++;
        $scope.getQuestionByID($scope.currentQuestion);

        });
    }

    var checkEnding = function () {
        if($scope.currentQuestion<=10)
        {

            alert($scope.currentQuestion)
        }
        else
        {
            $scope.quizend=true;
        }

    }

}]);

Answer 1

I think this is because you don't change your $scope.quizzstarted. Edit your checkending function :

var checkEnding = function () {
    if($scope.currentQuestion<=10) {
        alert($scope.currentQuestion)
    }
    else {
        $scope.quizend=true;
        $scope.quizzstarted = false;
    }
}

Mean stack application : can't hide content using directive “ng-hide'”

Question

1 answers

solution1
2 ACCPTED 2015-12-14 15:40:46

Mean stack application : can't hide content using directive “ng-hide'”

Question

1 answers

solution1 2 ACCPTED 2015-12-14 15:40:46

solution1
2 ACCPTED 2015-12-14 15:40:46