Angular ng-show不适用于初始页面加载

马特·狄奥尼斯

我正在使用Angular的ng-show指令来更改问题在测验中的显示方式,然后在测验完成时显示结果。除第一个问题外,其他所有操作均按预期进行。当测验加载时,我初始化$ scope.image = false。由于某些原因,会同时显示ng-show =“ image”的div和ng-show =“!image”的div。我希望只有ng-show =“!image”的div出现。相关代码如下。注意:为了节省空间,我没有在控制器或index.html中包括适当的ng-app标头等的位置包含所有问题或结果对象:

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

控制器:

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;
        }
    };
});
尼克·H

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

ng-show / ng-hide / ng-if如果不适用于Angular指令

来自分类Dev

Angular ng-include不适用于剃须刀页面

来自分类Dev

Angular验证消息不适用于ng-show和两个输入

来自分类Dev

Angular js ng-show不适用于本机Math表达式

来自分类Dev

Angular的ng include指令不适用于预期的链接

来自分类Dev

ng-keydown不适用于angular

来自分类Dev

Angular指令不适用于ng-repeat

来自分类Dev

Angular的ng include指令不适用于预期的链接

来自分类Dev

Angular 指令 ng-model 适用于数组但不适用于字符串

来自分类Dev

Angular.js必需,而ng必需不适用于<textarea> </ textarea>

来自分类Dev

Angular js ng-repeat不适用于服务器响应

来自分类Dev

Angular ng-repeat不适用于我的数组

来自分类Dev

angular-google-maps不适用于不是text / ng-template的templateUrl

来自分类Dev

Angular js ng-repeat不适用于服务器响应

来自分类Dev

Angular JS中的fieldset ng-disabled不适用于按钮

来自分类Dev

Angular表达式不适用于ng-disabled

来自分类Dev

Ng2-table不适用于最新的Angular2版本

来自分类Dev

Angular ng-change 不适用于复选框

来自分类Dev

ng-show不适用于div上的类

来自分类Dev

AngularJS ng-show不适用于Viewbag

来自分类Dev

ng-show不适用于div上的类

来自分类Dev

AngularJS ng-show不适用于Viewbag

来自分类Dev

ng-show不适用于UnderscoreJS的_.isNull,但适用于val === null

来自分类Dev

Angular 7:Rxjs行为主题订阅不适用于页面重新加载,但可用于路线导航

来自分类Dev

ng-hide / ng-show 不适用于使用 ng-click 调用的函数

来自分类Dev

ng-if不适用于getDay()

来自分类Dev

Ng样式不适用于背景

来自分类Dev

ngAnimate CSS动画不适用于ng-show和ng-hide

来自分类Dev

在ng-click上进行ng-show不适用于AngularJS

Related 相关文章

热门标签

归档