angular ng-show funktioniert nicht

Ich versuche dies in eckigen. Ich arbeite in der Version 1.4.5 und es funktioniert nicht, zeigen nur das Element termsinfo und in den anderen nichts tun. Wenn mir jemand helfen kann, poste ich den Code in einer Simulation, um es auszuprobieren.angular ng-show funktioniert nicht

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

Quelle

2016-04-19 david raja

Entfernen Sie einfach style="display: none;" wie Sie bereits 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>

Quelle

2016-04-19 13:36:53 Oyeme

entfernen style="display: none;" als Winkel Direktive wird Inline-Stile nicht überschrieben werden.

Quelle

2016-04-19 13:39:59

$ scope.terms nicht ausgeführt zu werden -

$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 !! ja, ich habe es verpasst zu bemerken, du musst entfernen - display: none too

Quelle

2016-04-19 13:41:00

remove style = "display: none;" Dies wird implizit von ng-show ID-Ausdruck ist falsch hinzugefügt.

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

Quelle

2016-04-19 14:49:47

angular ng-show funktioniert nicht

Antwort

Verwandte Themen