如何将活动类添加到第一个动态选项卡而不是角度的静态选项卡？答案

【问题标题】：How do I add the active class to the first dynamic tab instead of the static tab in angular?如何将活动类添加到第一个动态选项卡而不是角度的静态选项卡？
【发布时间】：2016-04-25 15:23:14
【问题描述】：

我遇到了 ui-bootstrap 的标签集的问题。我有一个静态选项卡（其他），其余的都是使用 ng-repeat 添加的。我无法让第一个动态加载的选项卡处于活动状态，而是始终将活动类添加到静态类。如何将活动类添加到第一个动态选项卡？为了清楚起见，我删除了一些杂物。

文档在这里：https://angular-ui.github.io/bootstrap/#/tabs

<tabset>
  <tab ng-repeat="room in rooms" heading="{{room.Name}}">
    <div>
      <div ng-repeat="item in room track by $index">
        <div>
          <p>{{item.Title}}</p>
        </div>
        <div>
        </div>
      </div>
    </div>
  </tab>
  <tab heading="Other">
    <form name="customItem">
      <input type="text" class="form-control" ng-model="customItem.Title" placeholder="Title" />
      <button class="btn btn-default" ng-click="addCustomItem(customItem.Title)">Add custom item</button>
    </form>
  </tab>
</tabset>

【问题讨论】：

标签： javascript html angularjs angular-ui-bootstrap

【解决方案1】：

您应该尝试选项卡的 ng-repeat 中的 ng-class，您可以使用以下代码检查它是否是第一个元素：ng-class="{'active': $index==0}"

<tabset>
  <tab ng-repeat="room in rooms" heading="{{room.Name}}" ng-class="{'active': $index==0}">
    <div>
      <div ng-repeat="item in room track by $index">
        <div>
          <p>{{item.Title}}</p>
        </div>
        <div>
        </div>
      </div>
    </div>
  </tab>
  <tab heading="Other">
    <form name="customItem">
      <input type="text" class="form-control" ng-model="customItem.Title" placeholder="Title" />
      <button class="btn btn-default" ng-click="addCustomItem(customItem.Title)">Add custom item</button>
    </form>
  </tab>
</tabset>

【讨论】：