uib-tabset dynamic index not working

Question

I am trying to set uib-tabs dynamically. I mean I have written all the codes in html and only taking index dynamically see the code. I have simplified the example here. I gave index="1" to very first tab but it's not working as required.

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

Thanks in Advance.

I can't use ng-repeat with tabs as they are different and my HTML file is too large

score 0 · Answer 1 · edited Jul 19 '17 at 06:00

0

You can use $index to set the tabs index dynamically and ng-repeat to generate the 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>

edited Jul 19 '17 at 06:00

tanmay

7,761
2
19
38

answered Jul 19 '17 at 05:41

Denny John

464
7
20

yes, I can do that but as I said my HTML file which has index is too much complicated and I ca not transfer all of them to JSON so this is not physible for me. – Yash Ganatra Jul 19 '17 at 05:43
What kind of index does your index.html has and y cant u use ng-repeat.Can u make it a bit more clear ? – Denny John Jul 19 '17 at 05:46
I have different different tabs which run on same state and has almost 15 to 20 files in the same uib-tabset and I can not restructure all the files. That's why I can not use ng-repeat. – Yash Ganatra Jul 19 '17 at 05:52

uib-tabset dynamic index not working

1 Answers1