我正在制作一个平均堆栈应用程序，但遇到了一个问题! 我尝试在第 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/