文章/答案/技术大牛

发布

问angular ng-show不起作用
EN

Stack Overflow用户

提问于 2016-04-19 21:32:27

回答 4查看 534关注 0票数 1

我在angular中尝试了一下。我在1.4.5版本中工作，但它不工作，只显示元素termsinfo，而在其他版本中什么也不做。如果有人可以帮助我，我会在一个模拟中发布代码来试用它。

// Code goes here
var app = angular.module('app',[]);
app.controller('legalController', function ($timeout, $scope) {
    $scope.termsinfo = true;
    $scope.cookiesinfo = false;
    $scope.privacy = false;
    $timeout(function () {
        $scope.terms = function () {
            $scope.termsinfo = true;
            $scope.cookiesinfo = false;
            $scope.privacy = false;
        }
        $scope.cookies = function () {
            $scope.termsinfo = false;
            $scope.cookiesinfo = true;
            $scope.privacy = false;
        }
        $scope.private = function () {
            $scope.termsinfo = false;
            $scope.cookiesinfo = false;
            $scope.privacy = true;
        }
    });
  
});

<!DOCTYPE html>
<html>

  <head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="legalController">
    <div id="splash">
    <div id="intro-container">
        <h1>legal</h1>
        <h3>Find legal information and resourcesservices</h3>
    </div>

    <div id="splash-overlay"></div>
</div>
<div id="legal-sections">
    <div id="switcher">
        <ul>
            <li><a id="open-terms-use" ng-click="terms()">Terms of Use</a></li>
<!--            <li><a id="open-security">Security</a></li>-->
            <li><a id="open-cookies" ng-click="cookies()">Cookies Policy</a></li>
            <li><a id="open-private" ng-click="private()">Private Policy</a></li>
        </ul>
    </div>
    <div id="terms-use" ng-show="termsinfo">
        <section>
            <div class="container">
                <div class="Ehl-Page-Header">
                    <h1 class="h2">Terms of use</h1>
                </div></div>

        </section>
    </div>
    <div id="security">
    </div>
    <div id="cookies" style="display: none;" ng-show="cookiesinfo">
        <div>
            <section class="clear container-fluid" id="Cookies-Top">
                <div class="Bg-Mask"></div>
                <div class="container">
                    <h1 class="h2">Cookies</h1>
                </div>
  
            </section>
        </div>
    </div>
    <div id="private-policy" style="display: none;"  ng-show="privacy">
        <div>
            <section>
                <div class="container">
                <div class="Ehl-Page-Header">
                    <h1 class="h2">Privacy</h1>
                </div></div>
            </section>
        
    </div>
</div>
</div>
  </body>

</html>

javascript

angularjs

回答 4

Stack Overflow用户

发布于 2016-04-19 21:36:54

删除style="display: none;"，因为您已经在使用ng-show了

// Code goes here
var app = angular.module('app',[]);
app.controller('legalController', function ($timeout, $scope) {
    $scope.termsinfo = true;
    $scope.cookiesinfo = false;
    $scope.privacy = false;
    $timeout(function () {
        $scope.terms = function () {
            $scope.termsinfo = true;
            $scope.cookiesinfo = false;
            $scope.privacy = false;
        }
        $scope.cookies = function () {
            $scope.termsinfo = false;
            $scope.cookiesinfo = true;
            $scope.privacy = false;
        }
        $scope.private = function () {
            $scope.termsinfo = false;
            $scope.cookiesinfo = false;
            $scope.privacy = true;
        }
    });
  
});

<!DOCTYPE html>
<html>

  <head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="legalController">
    <div id="splash">
    <div id="intro-container">
        <h1>legal</h1>
        <h3>Find legal information and resourcesservices</h3>
    </div>

    <div id="splash-overlay"></div>
</div>
<div id="legal-sections">
    <div id="switcher">
        <ul>
            <li><a id="open-terms-use" ng-click="terms()">Terms of Use</a></li>
<!--            <li><a id="open-security">Security</a></li>-->
            <li><a id="open-cookies" ng-click="cookies()">Cookies Policy</a></li>
            <li><a id="open-private" ng-click="private()">Private Policy</a></li>
        </ul>
    </div>
    <div id="terms-use" ng-show="termsinfo">
        <section>
            <div class="container">
                <div class="Ehl-Page-Header">
                    <h1 class="h2">Terms of use</h1>
                </div></div>

        </section>
    </div>
    <div id="security">
    </div>
    <div id="cookies" ng-show="cookiesinfo">
        <div>
            <section class="clear container-fluid" id="Cookies-Top">
                <div class="Bg-Mask"></div>
                <div class="container">
                    <h1 class="h2">Cookies</h1>
                </div>
  
            </section>
        </div>
    </div>
    <div id="private-policy" ng-show="privacy">
        <div>
            <section>
                <div class="container">
                <div class="Ehl-Page-Header">
                    <h1 class="h2">Privacy</h1>
                </div></div>
            </section>
        
    </div>
</div>
</div>
  </body>

</html>

票数 3

Stack Overflow用户

发布于 2016-04-19 21:39:59

将style="display: none;"作为angular指令移除不会覆盖内联样式。

票数 1

Stack Overflow用户

发布于 2016-04-19 21:41:00

$scope.terms不会被执行-

 $timeout(function () {
        $scope.terms = function () {
            $scope.termsinfo = true;
            $scope.cookiesinfo = false;
            $scope.privacy = false;
        }() //add these braces to execute
        $scope.cookies = function () {
            $scope.termsinfo = false;
            $scope.cookiesinfo = true;
            $scope.privacy = false;
        }() //add these braces to execute
        $scope.private = function () {
            $scope.termsinfo = false;
            $scope.cookiesinfo = false;
            $scope.privacy = true;
        }()
    });

哦！！是的，我没有注意到，您需要删除-display: too

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36720017

复制

相似问题

问angular ng-show不起作用
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问angular ng-show不起作用EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问angular ng-show不起作用
EN