javascript - Angular ng-show 在初始页面加载时不起作用

Question

我正在使用 Angular 的 ng-show 指令来更改测验中问题的显示方式，然后在测验完成时显示结果。除了第一个问题之外，一切都按预期进行。当测验加载时，我初始化 $scope.image = false。由于某种原因，带有 ng-show="image"的 div 和带有 ng-show="!image"的 div 都会出现。我希望只出现带有 ng-show="!image"的 div 。相关代码如下。注意:为了节省空间，我没有将所有问题或结果对象包含在 Controller 或 index.html 中，其中包含正确的 ng-app header 等:

html:

<div class="jumbotron text-center" ng-hide="quizComplete" ng-show="!image">
    <h3>{{ questions[number].ask }}</h3>
    <div class="row">
        <div ng-repeat="answer in questions[number].answers" class="choice">
            <div ng-click="recordChoice(answer.points)">
                <span class="centerer"></span>
                    <span class="centered">{{ answer.choice }}</span>
            </div>
        </div>
    </div>
</div>

<div class="jumbotron text-center" ng-hide="quizComplete" ng-show="image">
    <h3>{{ questions[number].ask }}</h3>
    <div class="row">
        <div ng-repeat="answer in questions[number].answers" class="choice">
            <div ng-click="recordChoice(answer.points)">
                <img ng-src="/img/{{ answer.img }}.jpg" alt="" class="img-responsive">
            </div>
        </div>
    </div>
</div>

<div class="jumbotron text-center" ng-show="quizComplete">
    <h2>{{ results[result].title }}</h2>
    <p>{{ results[result].details }}</p>
</div>

Controller :

angular.module('NerdCtrl', []).controller('NerdController', function($scope, $routeParams) {

    $scope.questions = [{"ask": "Choose a Social Media platform:", "answers": [{"choice": "Facebook", "points": 2, "img": "Facebook"}, {"choice": "Twitter", "points": 3, "img": "Twitter"}, {"choice": "Google+", "points": 1, "img": "GooglePlus"}]}];

    $scope.results = [{title: "The Mummy", details: "You are the original..."}];


    $scope.number = 0;
    $scope.tallyMummy = 0;
    $scope.tallyFrankenstein = 0;
    $scope.tallyWolfman = 0;
    $scope.tallyJeckyll = 0;
    $scope.image = false;
    $scope.quizComplete = false;

    $scope.recordChoice = function(points) {
        if ($scope.number < 9) {
            switch(points) {
                case 1:
                    $scope.tallyMummy++;
                    break;
                case 2:
                    $scope.tallyFrankenstein++;
                    break;
                case 3:
                    $scope.tallyWolfman++;
                    break;
                case 4:
                    $scope.tallyJeckyll++;
                    break;
            }
            $scope.number++;
            if ($scope.number === 1 || $scope.number === 6 || $scope.number === 7 || $scope.number === 9) {
                $scope.image = true;
            } else {
                $scope.image = false;
            }
        } else {
            $scope.quizComplete = true;
            $scope.result = 0;
        }
    };
});

Answer 1

如果你像这样一起使用 ng-hide 和 ng-show 并且 ng-hide 计算结果为 false，我的猜测是两个 div 都应该显示。您是否尝试过仅使用一种方法来确保您的方法正常工作并且图像具有正确的值？如果是这样，添加另一个 div 作为包装器并将其用于 ng-hide，这样它们就不会互相冲突。