带有 ng-repeat 的 ng-show angular 标签

Question

我已经为此工作了一段时间，但无法弄清楚为什么它不起作用。 This is the effect I am trying to create- 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

我的 angular 代码如下所示。

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 建议使用 controllerAs，因为您已经通过使用 Packages 作为控制器的别名来使用它。现在将 tab 变量放入控制器变量中，如 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>

带有 ng-repeat 的 ng-show angular 标签

ng-show angular tab with ng-repeat

javascript

angularjs

angularjs-ng-repeat

ng-show

angularjs-controlleras