角度ng-show不起作用

时间：2016-04-19 13:32:27

标签： javascript angularjs

我试着用角。我在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>

4 个答案:

答案 0 :(得分：3)

只需删除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>

答案 1 :(得分：1)

删除style="display: none;"，因为angular指令不会覆盖内联样式。

答案 2 :(得分：1)

$ 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：none too

答案 3 :(得分：0)

remove style =“display：none;”这将由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>
相关问题
最新问题