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不會禁用項目

回答

相關問題