ブートストラップUIのアクティブな属性は正しい内容を表示しません

Question

私のアングルアプリでは、ブートストラップ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> 

一つの機能を追加することですアクティブなクラスです。これは動作しています。 item.indexを記録するとコンソールに表示され、関連するコンテンツを表示するはずですが、そうではありません。

質問

li項目がngRepeatからクリックされたときに、なぜtabcontentが表示されませんか？

<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 
    } 
] 

は実装にplunkerです：https://plnkr.co/edit/GUVq5Mc3DvaAIITl8sLj?p=preview