Angular UI - установить активную вкладку программно

Question

Я использовал AngularUI с этим кодом:

<uib-tabset type="pills">
    <uib-tab heading="Tab 1">Tab 1 content</uib-tab>
    <uib-tab heading="Tab 2">Tab 2 content</uib-tab>
</uib-tabset>

Я хочу программно изменить текущий активный тег из кода моего углового контроллера. Например, выберите вкладку "2", чтобы быть активным.

Как это можно сделать?

Answer 1

Вам нужно использовать активное свойство на ui-tabset. Тогда вам нужно иметь индексы на каждой вкладке для работы вне контекста.

<uib-tabset type="pills" active="active">
    <uib-tab heading="Tab 1" index="0">Tab 1 content</uib-tab>
    <uib-tab heading="Tab 2" index="1">Tab 2 content</uib-tab>
</uib-tabset>

Смотрите этот рабочий plnkr: Рабочий Plnkr

Answer 2

У меня была та же проблема, и этот ответ помог мне разобраться.

Я использовал две переменные в области видимости: $scope.showTabsInView а также $scope.activeTabIndex,

Значения по умолчанию:

$scope.showTabsInView = false;
$scope.activeTabIndex = 0;

Сначала я загрузил свой dynamic tabsЗатем я указал значение activeTabIndex, Затем я изменил значение showTabsInView к истине.

<uib-tabset ng-if="showTabsInView" active="activeTabIndex">
    <uib-tab data-ng-repeat="tab in tabs" heading="{{tab.title}}">{{tab.content}}</uib-tab>
</uib-tabset>

Вы можете просто игнорировать dynamic tabs а также $scope.showTabsInView если ваш случай не так уж и сложен.