帶ng-repeat的ng-show角度選項卡

Question

我一直在研究這個問題一段時間，但無法弄清楚爲什麼它不起作用。 This是我正在創建的效果 - http://plnkr.co/edit/RAeIwFbn2Zoe9WfLdMX8?p=preview。我希望創建一個標籤欄，點擊時會顯示不同的信息。

這是我到目前爲止的代碼，但它不會出於某種原因：

HTML

<ul class="nav nav-pills"> 
<li ng-repeat="tablet in Packages.panelTabs"> 
    <a href ng-click="tab = tablet.tabNum"> 
     {{tablet.name}} 
    </a> 
</li> 
    <p ng-show="tab === 1"> Tab1 content </p>   
    <p ng-show="tab === 2"> Tab2 content</p> 
</ul> 

JS

我的角度代碼如下所示。

this.panelTabs = [ 

      { 
       name: "package-price", 
       tabNum: 1 
      }, 
      { 
       name: "package-description", 
       tabNum: 2 
      } 
     ]; 

我已閱讀各種答案，並嘗試了很多事情，但覺得它一定是我失蹤的一些愚蠢的東西。任何幫助將不勝感激。

謝謝，保羅

Answer 1

雖然設置tab模型都使用$parent關鍵字聲明它的父範圍。每次迭代ng-repeat指令的原因確實會創建一個新的原型繼承範圍。

標記

<li ng-repeat="tablet in Packages.panelTabs"> 
    <a href ng-click="$parent.tab = tablet.tabNum"> 
     {{tablet.name}} 
    </a> 
</li> 

@azium建議，因爲你已經在使用它通過使用Packages作爲控制器的別名使用controllerAs。現在把標籤變量控制器變量中像Packages.tab

標記

<li ng-repeat="tablet in Packages.panelTabs"> 
    <a href ng-click="Packages.tab = tablet.tabNum"> 
     {{tablet.name}} 
    </a> 
</li> 
<p ng-show="Packages.tab === 1"> Tab1 content </p>   
<p ng-show="Packages.tab === 2"> Tab2 content</p>