堆栈内存溢出
  简体   繁体   English

角度ng-show不起作用

[英]angular ng-show doesn't work

 原文  2016-04-19 13:32:27  3   4    javascript/ angularjs

问题描述

I trying this in angular. 我尝试这种角度。 I working in version 1.4.5 and it's not working, only show the element termsinfo and in the others don't do anything. 我在1.4.5版中工作，但是它不起作用，仅显示元素termsinfo，其他元素则不执行任何操作。 If someone can help me, i post the code in a simulation for try it. 如果有人可以帮助我，我会在模拟中发布代码以进行尝试。 

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

4 个解决方案

解决方案1
 3  2016-04-19 13:36:53

Just remove style="display: none;" 只需删除style="display: none;" as you're already using ng-show 因为您已经在使用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>

解决方案2
 1  2016-04-19 13:39:59

Remove style="display: none;" 删除style="display: none;" as angular directive will not overwrite inline-styles. 因为angular指令不会覆盖内联样式。

解决方案3
 1  2016-04-19 13:41:00

$scope.terms is not getting executed - $ 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;
        }()
    });

Oops!! 糟糕！ yes, I missed to notice, you need to remove - display:none too 是的，我错过了，您也需要删除-display：none

解决方案4
 0  2016-04-19 14:49:47

remove style="display: none;" 删除样式=“ display：none;” this will be implicitly added by ng-show id expression is false. 这将由ng-show id表达式为false隐式添加。 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Angular.js ng-show只是不起作用 - Angular.js ng-show just doesn't work Angular.js ng-show和指令不起作用 - Angular.js ng-show and directive doesn't work Angular ng-show指令不适用于按钮 - Angular ng-show directive doesn't work for button AngularJS ng-show不起作用 - AngularJS ng-show doesn't work ng-Show不适用于指令 - ng-Show doesn't work with directives ng-show不适用于$ scope - ng-show doesn't work with $scope 如果我添加ng-if，则角度ng-show不起作用 - Angular ng-show doesn't work if I add ng-if AngularJS ng-show和ng-hide不起作用 - AngularJS ng-show and ng-hide doesn't work angularJS：ng-show不适用于ng-app？ - angularJS: ng-show doesn't work with ng-app? ng-show和ng-hide不起作用 - ng-show and ng-hide doesn't work
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM