gpt4 book ai didi

javascript - 平均堆栈应用: can't hide content using directive "ng-hide' "

转载 作者:行者123 更新时间:2023-12-02 15:18:33 30 4
gpt4 key购买 nike

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

<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 Controller 代码:

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

}

}]);

最佳答案

我认为这是因为您没有更改 $scope.quizzstarted。编辑您的检查函数:

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

关于javascript - 平均堆栈应用: can't hide content using directive "ng-hide' ",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34270793/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com