0

我正在嘗試動態設置uib-tabs。 我的意思是我已經寫在html中的所有代碼,並只採取索引動態看代碼。我在這裏簡化了這個例子。我給index =「1」到第一個選項卡,但它不按要求工作。uib-tabset動態索引不起作用

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script> 
 
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.0.0.js"></script> 
 

 

 
<div ng-app="uib-tabs.demo" ng-controller="TabsDemoCtrl"> 
 
    <!--I have given index 1 to Static tab still it's at index 0. 
 
    actually in my code I am calling a function from index which returns the index somethiing like this 
 
    
 
    <uib-tab index="findMyIndex('static')" heading="Static title">Static content</uib-tab>--> 
 
    <uib-tabset active="active"> 
 
    <uib-tab index="1" heading="Static title">Static content</uib-tab> 
 
    <uib-tab index="0" select="alertMe()"> 
 
     <uib-tab-heading> 
 
     <i class="glyphicon glyphicon-bell"></i> Alert! 
 
     </uib-tab-heading> 
 
     I've got an HTML heading, and a select callback. Pretty cool! 
 
    </uib-tab> 
 
    </uib-tabset> 
 
</div> 
 
    
 
<script> 
 
angular.module('uib-tabs.demo', ['ngAnimate', 'ui.bootstrap']) 
 
.controller('TabsDemoCtrl', function ($scope, $window) { 
 
    $scope.tabs = [ 
 
    { title:'Dynamic Title 1', content:'Dynamic content 1' }, 
 
    { title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true } 
 
    ]; 
 

 
    $scope.alertMe = function() { 
 
    setTimeout(function() { 
 
     $window.alert('You\'ve selected the alert tab!'); 
 
    }); 
 
    }; 
 

 
    $scope.model = { 
 
    name: 'Tabs' 
 
    }; 
 
}); 
 
</script>

在此先感謝。

我不能使用NG重複使用的標籤,因爲它們是不同的,我的HTML文件過大

回答

0

您可以使用$index動態設置標籤指數和ng-repeat生成tabsets。

<uib-tabset active="active"> 
    <uib-tab index="$index" ng-repeat="tab in tabs" > 
    <uib-tab-heading>{{tab.title}}</uib-tab-heading> 
    {{tab.content}} 
    </uib-tab> 
</uib-tabset> 
+0

是的,我能做到這一點,但正如我所說的索引號爲我的HTML文件太多複雜,我CA不是所有的人轉移到JSON所以這不是physible我。 –

+0

你的index.html有什麼樣的索引,你不能使用ng-repeat。你可​​以更清楚一點嗎? –

+0

我有不同的標籤在同一個狀態下運行,並且在同一個uib-tabset中有近15到20個文件,我無法重新構造所有文件。這就是爲什麼我不能使用ng-repeat。 –