web-dev-qa-db-fra.com

Angular UI - définir l'onglet actif par programme

J'utilise AngularUI avec ce code:

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

Je souhaite modifier par programme la balise active actuelle à partir de mon code de contrôleur angulaire. Par exemple, sélectionnez l'onglet "2" pour être actif. 

Comment cela peut être fait?

angularjsangular-ui-bootstrapangular-uiangular-ui-tabset
7
No1Lives4Ever

Vous devez utiliser la propriété active sur ui-tabset . Vous devez ensuite avoir des index sur chaque onglet pour pouvoir travailler à partir d'un contexte extérieur. 

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

Voir ce travail de travail: Travail de travail

12
Ashwani

J'ai eu le même problème et cette réponse m'a aidé à comprendre.

J'ai utilisé deux variables dans la portée: $scope.showTabsInView et $scope.activeTabIndex.

Les valeurs par défaut sont:

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

D'abord, j'ai chargé mon dynamic tabs, puis j'ai spécifié la valeur de activeTabIndex. Ensuite, j'ai changé la valeur de showTabsInView en true.

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

Vous pouvez simplement ignorer dynamic tabs et $scope.showTabsInView si votre cas n’est pas tellement compliqué.

2
Roham Rafii