Как добавить активный класс на первую динамическую вкладку вместо статической вкладки под углом?

Question

Как добавить активный класс на первую динамическую вкладку вместо статической вкладки под углом?

0

У меня проблема с 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>

Poot87 25 апр. 2016, в 18:11

Источник

Теги:

javascript

html

angularjs

angular-ui-bootstrap

1 ответ

Ещё вопросы

Mate Zabo · Answer 1 · 2016-04-25T14-24-00.000Z

Вы должны попробовать ng-класс на вкладке ng-repeat, и вы можете проверить, является ли он первым элементом или нет с этим кодом: 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>