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

Posted 2023-02-19

【中文标题】带有 Ng-repeat 和静态选项卡的 ui-tab

【英文标题】：ui-tab with Ng-repeat and static tab

【发布时间】：2016-07-17 15:29:27

【问题描述】：

我正在尝试为日期创建一个选项卡。我还想要一个选项卡，单击它会添加另一个选项卡。

这是我的一些代码

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

其中日期 = date: "someDate", active: false。

问题是，当我在 html 中运行它时，我注意到 uib-tabset 的活动未设置为第一个选项卡索引，而是对作为静态选项卡的最后一个选项卡处于活动状态。

当我删除静态部分时

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

您可以通过在uib-tabset 中添加active="1" 并在uib-tab 中添加index 属性来选择第一个选项卡：

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

【讨论】：

你拯救了我的一天