Question

我遇到了ui-bootstrap的tabsets问题。我有一个静态选项卡（其他），其余的使用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>

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

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

1 个答案: