使用布尔值获取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隐藏，但它们都显示。

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

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

答

您是否包含了jQuery脚本引用？如果您没有包含它，只需从cdn中找到一个jQuery版本1.10引用链接或自行下载该文件。然后设置为低于参考链接：

jQuery脚本
angularjs脚本
脚本文件应包含如下angularjs以及

如果你没有所有这些只是让我知道，所以我可以帮助你与别的东西。

这里不需要添加'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>

使用布尔值获取ngShow工作

相关推荐