Bootstrap UI 的活动属性不会显示正确的内容

Question

在我的 Angular 应用程序中，我正在使用 bootstrap ui.bootstrap 模块。在整个站点中，我不得不使用自己的自定义 ul 作为选项卡按钮来显示指定的内容。像这样：

<ul class="nav phase-pills">
    <li ng-click="activeTab = 0;>Green</li>
    <li ng-click="activeTab = 1;>Amber</li> //user clicks. activeTab has value of 1
    <li ng-click="activeTab = 2;>Red</li>
    <li ng-click="activeTab = 3;">Blue</li>
</ul>

<uib-tabset active="activeTab" type="pills"> //activeTab
    <uib-tab heading="Green" index="0" class="bg-phase-green font-body" ng-hide="true"> //ng-hide hides this tab and my own list item can act as the tab
        //content   
    </uib-tab>
    <uib-tab heading="Amber" index="1" ng-hide="true"> // index 1.. displays
        //content   
    </uib-tab>
    <uib-tab heading="Red" index="2" ng-hide="true">
        //content       
    </uib-tab>
    <uib-tab heading="Blue" index="3" ng-hide="true">
        //content   
    </uib-tab>                  
</uib-tabset>

点击后，activeTab更新为指定的值，并显示相应的内容。

我现在不得不使用 ng-repeat 来显示自定义选项卡，这应该不会引起问题，因为我正在关联来自控制器的索引值，如下所示：

vm.activityNotifications = [
    {
        activity: 'Stage Change',
        index: '0'
    },
    {
        activity: 'Transactions',
        index: '1'
    },
    {
        activity: 'Renewals',
        index: '2'
    }
]

<ul class="nav btn-default view-pills">
    <li ng-repeat="item in $ctrl.activityNotifications"
         ng-click="$ctrl.setActivityActiveTab(item.activity); 
                   activeActivityTabResp = item.index"
        ng-class="{active : $ctrl.activeMenu == item.activity}">
      <a class="nav-link">{{item.activity}}</a>
    </li>
</ul>

我有一个功能是添加一个活动的 class，它正在工作。当我登录 item.index 时，它显示在控制台中，因此它应该显示相关内容，但实际上没有。

问题

为什么在 ngRepeat 中单击 li 项目时标签内容不显示？

<uib-tabset type="pills view-pills" active="activeActivityTabResp">
    <uib-tab heading="Stage Change" index="0" ng-hide="true">
        //content       
    </uib-tab>
    <uib-tab heading="Transactions" index="1" ng-hide="true">
        //content       
    </uib-tab>
   <uib-tab heading="Renewals" index="2" ng-hide="true">
        //content
   </uib-tab>   
</uib-tabset>

Answer 1

index属性需要是整数。

vm.activityNotifications = [
    {
        activity: 'Stage Change',
        index: 0
    },
    {
        activity: 'Transactions',
        index: 1
    },
    {
        activity: 'Renewals',
        index: 2
    }
]

这里有一个实现的插件：https://plnkr.co/edit/GUVq5Mc3DvaAIITl8sLj?p=preview

Bootstrap UI 的活动属性不会显示正确的内容

Active attribute for Bootstrap UI won't display correct content

angularjs

angular-ui-bootstrap