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

How do I add the active class to the first dynamic tab instead of the static tab in angular?

本文关键字：选项 静态 动态 活动 添加 第一个      更新时间：2023-09-26

我在使用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>

您应该在选项卡的 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>
相关文章：