使用布爾值獲取ngShow工作

真的很抱歉這個簡單的問題，但出於某種原因，我無法在網站上找到這個簡單的東西。我不認爲我很理解控制器是如何分配給一個html塊的。以下是我有使用布爾值獲取ngShow工作

的index.html：

<!DOCTYPE html> 
<html > 

<head> 
    <meta charset="utf-8"> 
    <title>Welcome to Firebase Hosting</title> 
    <style media="screen"> 
     body { 
      font-family: Roboto, Arial, sans-serif; 
      background: #ECEFF1; 
      color: rgba(0, 0, 0, 0.87); 
     } 

     a { 
      color: rgb(3, 155, 229); 
     } 

     #message { 
      max-width: 400px; 
      margin: 40px auto; 
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); 
      border-radius: 2px; 
      background: white; 
      padding: 16px 24px; 
     } 

     #message h1 { 
      font-size: 22px; 
      font-weight: 500; 
      text-align: center; 
      margin: 0 0 16px; 
     } 

     #message p { 
      font-weight: 300; 
      line-height: 150%; 
     } 

     #message ul { 
      list-style: none; 
      margin: 16px 0 0; 
      padding: 0; 
      text-align: center; 
     } 

     #message li a { 
      display: inline-block; 
      padding: 8px; 
      text-transform: uppercase; 
      text-decoration: none; 
      font-weight: 500; 
      background: rgb(3, 155, 229); 
      color: white; 
      border: 1px solid rgb(3, 155, 229); 
      border-radius: 3px; 
      font-size: 14px; 
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26); 
     } 
    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
</head> 

<body ng-app="portfolio"> 
    <div id="message" ng-controller="portCtrl"> 
     <div ng-show="main">Main</div> 
     <div ng-show="resume">Resume</div> 
    </div> 
</body> 

</html>

app.js：

angular.module('portfolio', []).controller('portCtrl', ['$scope', function($scope){ 
    $scope.main = true; 
    $scope.resume = false; 
}]);

對於控制器，我使用了更強的聲明我在W3學校發現，但是我跑進同樣的問題，而不使用額外的['$ scope']包裝。

我期待單詞Main顯示和單詞Resume隱藏，但它們都顯示。

來源

2017-02-25 Perkis

你忘了包括'app.js' – sh0ber

似乎是工作fine.make確保模塊腳本添加到您的HTML''一個''[Demo]（https://plnkr.co/edit/XFPksZXiRwKTUove34iy?p=preview） –

您是否包含了jQuery腳本引用？如果您沒有包含它，只需從cdn中找到一個jQuery版本1.10引用鏈接或自行下載該文件。然後設置爲低於參考鏈接：

jQuery腳本
angularjs腳本
腳本文件應包含如下angularjs以及

如果你沒有所有這些只是讓我知道，所以我可以幫助你與別的東西。

來源

2017-02-25 02:17:50

這裏不需要添加'jQuery'。 Angular包含一個'jQuery'精簡版，他沒有在他的代碼中使用任何'jQuery'。 – sh0ber

試試這個

<!DOCTYPE html> 
 
<html > 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Welcome to Firebase Hosting</title> 
 
    <style media="screen"> 
 
     body { 
 
      font-family: Roboto, Arial, sans-serif; 
 
      background: #ECEFF1; 
 
      color: rgba(0, 0, 0, 0.87); 
 
     } 
 

 
     a { 
 
      color: rgb(3, 155, 229); 
 
     } 
 

 
     #message { 
 
      max-width: 400px; 
 
      margin: 40px auto; 
 
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); 
 
      border-radius: 2px; 
 
      background: white; 
 
      padding: 16px 24px; 
 
     } 
 

 
     #message h1 { 
 
      font-size: 22px; 
 
      font-weight: 500; 
 
      text-align: center; 
 
      margin: 0 0 16px; 
 
     } 
 

 
     #message p { 
 
      font-weight: 300; 
 
      line-height: 150%; 
 
     } 
 

 
     #message ul { 
 
      list-style: none; 
 
      margin: 16px 0 0; 
 
      padding: 0; 
 
      text-align: center; 
 
     } 
 

 
     #message li a { 
 
      display: inline-block; 
 
      padding: 8px; 
 
      text-transform: uppercase; 
 
      text-decoration: none; 
 
      font-weight: 500; 
 
      background: rgb(3, 155, 229); 
 
      color: white; 
 
      border: 1px solid rgb(3, 155, 229); 
 
      border-radius: 3px; 
 
      font-size: 14px; 
 
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26); 
 
     } 
 
    </style> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
    <script> 
 

 

 
angular.module('portfolio', []).controller('portCtrl', ['$scope', function($scope){ 
 
    $scope.main = true; 
 
    $scope.resume = false; 
 
}]); 
 
    </script> 
 
</head> 
 

 
<body ng-app="portfolio"> 
 
    <div id="message" ng-controller="portCtrl"> 
 
     <div ng-show="main">Main</div> 
 
     <div ng-show="resume">Resume</div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-02-25 04:33:46

使用布爾值獲取ngShow工作

回答

相關問題