Question

我已经使用AngularUI构建了以Bootstrap为主题的标签：

<tabset>
    <tab>
        <tab-heading>Javascript <span class="badge">{{ count }}</span></tab-heading>
    </tab>
    <tab>
        <tab-heading>Python <span class="badge">{{ count }}</span></tab-heading>
    </tab>
    <tab>
        <tab-heading>Ruby <span class="badge">{{ count }}</span></tab-heading>
    </tab>
</tabset>

使用<span>查看{{ count }}个人？如果选择了包含标签（有效），我希望它们只显示。这样的事情会很完美：

<span ng-show="tab.active" class="badge">{{ count }}</span>

这不起作用，所以我写了函数$scope.setActiveTab和$scope.isTabActive，现在我的代码看起来像这样：

<tab select="setActiveTab(0)">
    <tab-heading>Javascript <span ng-show="isTabActive(0)" class="badge">{{ count }}</span></tab-heading>
</tab>
<tab select="setActiveTab(1)">
    <tab-heading>Python <span ng-show="isTabActive(1)" class="badge">{{ count }}</span></tab-heading>
</tab>
<tab select="setActiveTab(2)">
    <tab-heading>Ruby <span ng-show="isTabActive(2)" class="badge">{{ count }}</span></tab-heading>
</tab>

这很有效，但看起来很难看。（更不用说这不会使用多个标签集。）

是否有更好的方法可以从这些范围内访问选项卡的状态？

使用我当前代码的{Plunker：http://plnkr.co/edit/Id3aSU4NPcPNJO6gXuoo

Answer 1

在ng-repeat

中，这会更容易一些

<tab ng-repeat="tab in tabs" active="tab.active">
...
ng-show="tab.active"

Fiddle

从包含的元素中访问AngularUI选项卡的状态

1 个答案: