带有Ng-repeat和静态选项卡的ui-tab

时间:2016-03-29 21:06:39

标签: javascript jquery angularjs tabs angular-ui-bootstrap

我正在尝试为日期创建标签。我还想要一个标签,点击它时会添加另一个标签。

这是我的一些代码

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

其中dates = {date:&#34; someDate&#34;,active:false}。

问题在于,当我在HTML中运行它时,我注意到uib-tabset的active不会设置为第一个tab选项卡索引,而是激活最后一个选项卡,即静态选项卡。

当我删除静态部分

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

从代码中,然后它将恢复显示第一个选项卡索引。

从调试看来,它有ng-repeat,日期为index = 1,而我的静态标签为index = 0。

如何在加载时使我的活动标签成为我的ng-repeat中的第一个对象。另外,我想跟踪活动索引,这样当我单击静态选项卡时,它将转到index-1选项卡。

1 个答案:

答案 0 :(得分:1)

您可以在active="1"内添加uib-tabset并在index中添加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>