Angulaire de l'INTERFACE utilisateur - ensemble de l'onglet actif par programmation

Je l'aide 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 veux modifier par programmation de l'actif en cours de la balise de mon angulaires-le contrôleur de code. Par exemple, sélectionnez l'onglet "2" à l'actif.

Comment cela peut être fait?

Avez-vous essayer de fournir un ID pour chaque onglet, puis définissez le focus sur elle?
J'ai pensé à ce sujet. Me semble être une bonne approche, lorsque l'on traite avec AngularJS (peut-être une bonne approche pour JQuery). Je me trompe?
avez-vous essayé d'aller sur les docs ? il y a un exemple qui définit un onglet spécifique à l'aide de l'extérieur par un clic de bouton
La solution proposée par Ashwani utilise l'indice, qui est l'équivalent de donner des ID. Dans les deux cas, vous pouvez générer l'ID/Index Angulaire à l'aide de ses capacités.

OriginalL'auteur No1Lives4Ever | 2016-09-04

  1. 12

    Vous devez utiliser la propriété active sur l'interface utilisateur-tabset.
    Ensuite, Vous devez avoir des indices sur chaque onglet pour travailler à partir de l'extérieur de contexte. 

    <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 plnkr:
    Travail Plnkr

    Comment pouvons-nous faire pour dynamique tabsets?
    Tu veux dire quelque chose comme cela ? plnkr.co/modifier/GQfq8zpKqGm2uZWA8oGU?p=preview

    OriginalL'auteur Ashwani

  2. 2

    J'ai eu le même problème et ce 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;

    Tout d'abord, j'ai chargé mon dynamic tabs, puis j'ai spécifié la valeur de activeTabIndex. Puis j'ai changé la valeur de showTabsInView de vrai.

    <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 tout simplement ignorer dynamic tabs et $scope.showTabsInView si votre cas n'est pas très compliqué.

    OriginalL'auteur Roham Rafii