ui-tab with Ng-repeat and static tab

Question

I am trying to create a tabs for dates. I also want a tab that when clicked it will add another tab.

Here is a bit of my code

`<uib-tabset justified="true" class="ui-tab">
<uib-tab ng-repeat="date in dates track by $index" heading="{{date.date}}" ng-click="changeDay($index)" ui-on-drop="dropPlaceOnDate($data, $index)">
</uib-tab>
<uib-tab select="addDayToPlaylist()">
<uib-tab-heading>
<i class="glyphicon glyphicon-plus"></i>
</uib-tab-heading>
</uib-tab>
</uib-tabset>`

where dates = {date: "someDate", active: false}.

The issue is that when I run this in HTML, I notice that the active for uib-tabset is not set to the first tab index, but instead is active for the last tab which is the static tab.

When I remove the static portion

`<uib-tab select="addDayToPlaylist()">
<uib-tab-heading>
<i class="glyphicon glyphicon-plus"></i>
</uib-tab-heading>
</uib-tab>`

from the code, then it would revert to showing the first tab index.

It seems from debugging that it has the ng-repeat with dates as index =1 and and my static tab as index = 0.

How would I make my active tab on loading be my first object in my ng-repeat. Additionally, I would like to keep track of the active index so that when I do click the static tab, it would go to the index-1 tab.

Asad Shah Asad Shah · Accepted Answer · 2017-07-31T11:14:07

You can select first tab by adding active="1" inside uib-tabset and add index property in uib-tab:

<uib-tabset justified="true" class="ui-tab" active="1">
   <uib-tab ng-repeat="date in dates track by $index" heading="{{date.date}}" 
      ng-click="changeDay($index)" ui-on-drop="dropPlaceOnDate($data, $index)" 
      index="date.index"> <!--where date.index = 1 or you can get this from your response-->
   </uib-tab>
   <uib-tab select="addDayToPlaylist()">
      <uib-tab-heading>
         <i class="glyphicon glyphicon-plus"></i>
      </uib-tab-heading>
   </uib-tab>
</uib-tabset>

ui-tab with Ng-repeat and static tab

1 Answers