angular ng-showは動作しません

私はこれを角度で試しています。私はバージョン1.4.5で作業していますが、動作しません。は、termsinfo要素のみを表示し、他の要素は何もしません。誰かが私を助けることができるなら、私はそれを試してみるためにシミュレーションにコードを投稿します。すでにインラインスタイルを上書きしませんstyle="display: none;"として角度ディレクティブを削除NG-ショーangular 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>

出典

2016-04-19 david raja

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

だけ style="display: none;"を削除します。

出典

2016-04-19 13:36:53 Oyeme

を使用しているよう

出典

2016-04-19 13:39:59

$ 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; 
     }() 
    });

おっと！はい、私は気づきませんでした、あなたは削除する必要があります - ディスプレイ：なしも

出典

2016-04-19 13:41:00

remove style = "display：none;"これは暗黙的にng-show idによって追加されます。expressionは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>

出典

2016-04-19 14:49:47

angular ng-showは動作しません

答えて

関連する問題