我已经为此工作了一段时间,但不明白为什么它不起作用。 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
我的 Angular 代码如下所示。
this.panelTabs = [
{
name: "package-price",
tabNum: 1
},
{
name: "package-description",
tabNum: 2
}
];
我已经阅读了各种答案并尝试了很多方法,但觉得这一定是我错过的愚蠢的事情。任何帮助将不胜感激。
谢谢,保罗
最佳答案
在设置 tab
模型时,请使用 $parent
关键字在父范围中声明它。每次迭代的原因 ng-repeat
指令确实创建了一个新的原型(prototype)继承范围。
标记
<li ng-repeat="tablet in Packages.panelTabs">
<a href ng-click="$parent.tab = tablet.tabNum">
{{tablet.name}}
</a>
</li>
@azium 建议使用 controllerAs
,因为您已经通过使用 Packages
作为 Controller 的别名来使用它。现在将 tab 变量放入 Controller 变量中,例如 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>
关于javascript - ng-显示带有 ng-repeat 的 Angular 选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32426613/