Angular和ng-show不会禁用项目

我遇到了一个问题，即ng-show无法正常工作，因为我喜欢它。基本上，当我点击一个给定的面板时，我希望它显示该标签的信息。我试图用NG-显示控制它，但我似乎无法找到什么是错的：Angular和ng-show不会禁用项目

<!doctype html> 
<html ng-app="store"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Untitled Document</title> 
    <link rel="stylesheet" type="text/css" href="CodeSchool Angular/bootstrap-3.3.6-dist/css/bootstrap.min.css"/> 
    <link rel="stylesheet" type="text/css" href="style.css"/> 
</head> 

<body ng-controller="StoreController as store"> 
    <ul class="list-group"> 
     <li class="list-group-item" ng-repeat="product in store.products"> 
      <h3> 
       {{product.name}} 
       <em class="pull-right">{{product.price | currency }}</em> 
       <img ng-src="{{product.images[0].full}}" class="product-image"/>   
      </h3>  
      <section> 
       <ul class="nav nav-pills"> 
        <li><a href ng-click="tab=1">Description</a></li> 
        <li><a href ng-click="tab=2">Specifications</a></li> 
        <li><a href ng-click="tab=3">Reviews</a></li> 
       </ul> 


       <div class="panel" ng-show=="tab===1"> 
        <h4>Description</h4> 
        <p>{{product.description}}</p> 
       </div> 
       <div class="panel" ng-show=="tab===2"> 
        <h4>Specifications</h4> 
        <blockquote>None yet</blockquote> 
       </div> 
       <div class="panel" ng-show=="tab===3"> 
        <h4>Reviews</h4> 
        <blockquote>None yet</blockquote> 
       </div> 

      </section> 
     </li> 
    </ul> 
    <script type="text/javascript" src="angular.min.js"></script> 
    <script type="text/javascript" src="app.js"></script> 
</body> 
</html>

我知道我可能只是缺少一些愚蠢的，但任何帮助将是非常赞赏。

来源

2016-07-05 ParanoidPenguin

问题是你已经定义了tab并在ng-repeat本身内部进行了更改。基本上ng-repeat确实在它自己内部创建了新的作用域。欲了解更多详细看这里similar answer

变化tab到product.tab

HTML

<section> 
    <ul class="nav nav-pills"> 
     <li><a href ng-click="product.tab=1">Description</a></li> 
     <li><a href ng-click="product.tab=2">Specifications</a></li> 
     <li><a href ng-click="product.tab=3">Reviews</a></li> 
    </ul> 
    <div class="panel" ng-show="product.tab===1"> 
     <h4>Description</h4> 
     <p>{{product.description}}</p> 
    </div> 
    <div class="panel" ng-show="product.tab===2"> 
     <h4>Specifications</h4> 
     <blockquote>None yet</blockquote> 
    </div> 
    <div class="panel" ng-show="product.tab===3"> 
     <h4>Reviews</h4> 
     <blockquote>None yet</blockquote> 
    </div> 
</section>

正如所说的@ developer033的评论，你可以把更多更好的使用ng-switch指令而不是有3 ng-show指令。

来源

2016-07-05 14:28:15

事实证明，这是不正确的答案，但我已经在寻找合适的区域。展望ng展会，它有两个相同的标志附加到它。 – ParanoidPenguin

@ParanoidPenguin我敢肯定，这是不可能的，使其工作没有我建议的变化.. –

@Pankaj_Parkar不幸的是，因为我没有使用Git在此，我无法验证为什么事实并非如此。我已经改变了代码，将控制器中的选项卡和活动选项卡的大部分功能。如果你觉得你的答案，在大多数情况下是正确的，我不介意提交它作为答案;但下面的代码是解决我的问题所需的。 – ParanoidPenguin

所以，事实证明，这是愚蠢的，我有两个等号在ng-show旁边。

原文：

 <div class="panel" ng-show=="tab===1"> 
      <h4>Description</h4> 
      <p>{{product.description}}</p> 
     </div> 
     <div class="panel" ng-show=="tab===2"> 
      <h4>Specifications</h4> 
      <blockquote>None yet</blockquote> 
     </div> 
     <div class="panel" ng-show=="tab===3">

变为：

  <div class="panel" ng-show="tab===1"> 
       <h4>Description</h4> 
       <p>{{product.description}}</p> 
      </div> 
      <div class="panel" ng-show="tab===2"> 
       <h4>Specifications</h4> 
       <blockquote>None yet</blockquote> 
      </div> 
      <div class="panel" ng-show="tab===3">

来源

2016-07-05 14:33:13 ParanoidPenguin

你可以使用'ng-switch'指令（https://docs.angularjs.org/api/ng/directive/ngSwitch），在我看来它更适合这种情况。 – developer033

@ developer033呵呵，我跟着一个教程，他们用'ng-show'.....我现在想知道他们为什么不使用'ng-switch'，因为它似乎是一个更合适。它是Angular 1的一部分还是在更高版本中添加的？ – ParanoidPenguin

是的，它是Angular1的一部分。 – developer033

Angular和ng-show不会禁用项目

回答

相关问题