平均堆栈应用程序：无法使用指令 "ng-hide'" 隐藏内容

Question

我正在制作一个平均堆栈应用程序，但遇到了一个问题！我尝试在第 10 个问题问完后隐藏所有内容。当我遇到第 10 个问题时，我使用了设置为 true 的指令 ng-hide！这是代码：

<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>

现在是 js 控制器代码：

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

我认为这是因为你没有改变你的 $scope.quizzstarted。编辑您的检查结束功能：

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

平均堆栈应用程序：无法使用指令 "ng-hide'" 隐藏内容

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

javascript

angularjs

angularjs-directive

mean-stack

ng-hide