web-dev-qa-db-fra.com

Comment savoir quel onglet bootstrap est sélectionné dans Angular-UI

Existe-t-il un moyen de savoir quel onglet a été sélectionné lors de l'utilisation des onglets Bootstrap dans I angulaire ?

J'ai essayé de regarder le tableau des volets, mais il ne semble pas être mis à jour lors du changement d'onglet. Peut-on spécifier une fonction de rappel lorsqu'un onglet est sélectionné?

Mettre à jour avec l'exemple de code.

Le code suit beaucoup l'exemple de la page Angular UI bootstrap.

Balisage:

<div ng-controller="TabsDemoCtrl">
    <tabs>
        <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">
            <div ng-include="pane.template"></div>
        </pane>
    </tabs>
</div>

Manette:

var TabsCtrl = function ($scope) {
  $scope.panes = [
    { title:"Events list", template:"/path/to/template/events" },
    { title:"Calendar", template:"/path/to/template/calendar" }
  ];
};
angularjstwitter-bootstrapangular-uiangular-ui-bootstrapbootstrap-tabs
34
John P

En fait, c'est vraiment simple car chaque pane expose l'attribut active qui prend en charge la liaison de données bidirectionnelle:

<tabs>
    <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">      
        {{pane.content}}
    </pane>
</tabs>

puis un onglet actif peut être facilement trouvé, par exemple:

$scope.active = function() {
    return $scope.panes.filter(function(pane){
      return pane.active;
    })[0];
};

Voici un travail plunk

24
pkozlowski.opensource

si vous n'avez pas de répéteur, liez l'activité des onglets (ou des étendues) à un tableau

 <tab active="tabActivity[0]">...</tab>
 <tab active="tabActivity[1]">...</tab>

et dans votre manette

$scope.tabActivity=[false,false];

alors vous pouvez obtenir l'onglet actif avec

$scope.tabActivity.indexOf(true)
13
alban maillere

Je l'ai résolu en ajoutant une méthode (onTabSelect) sur le contrôleur et en l'appelant depuis l'événement ng-click de Tab. La solution ci-dessous a fonctionné pour moi s'il vous plaît voir cela en action

function myTabController($scope) {
  $scope.onTabSelect = function(tabName) {
    $scope.selectedTabName = tabName;
    console.log("Changed tab to " + tabName);
  }


  <tabset>
    <tab ng-click="onTabSelect('A')">
      <tab-heading>
        A
      </tab-heading>
    </tab>
    <tab ng-click="onTabSelect('B')">
      <tab-heading>
        B
      </tab-heading>
    </tab>
  </tabset>
12
Rupesh Kumar Tiwari

Ma réponse est pour le cas où vous placez manuellement l'onglet et que vous utilisez la bibliothèque angular ui boostrap, vous pouvez utiliser l'attribut select

<uib-tabset class="main-nav">
  <uib-tab select="showTab('a')">
    <uib-tab-heading>a</uib-tab-heading>
    <div class="tab-content"> <span>a</span></div>
  </uib-tab>
  <uib-tab select="showTab('b')">
    <uib-tab-heading>b</uib-tab-heading>
    <div class="tab-content"> <span>b</span></div>
  </uib-tab>
</uib-tabset>

dans la fonction showTab en passant l'attribut select, vous pouvez vérifier si votre onglet est sélectionné par son nom comme dans mon cas.

L'exemple complet est ici de angular ui, notez le select:

3
Tho Vo

La réponse acceptée ne fonctionne que pour les onglets dynamiques.

Pour les onglets statiques, vous pouvez définir l'attribut active de la directive uib-tabset Sur une propriété d'étendue et le comparer à l'index d'onglet pour trouver l'onglet actif.

Par exemple, dans le code ci-dessous, je le fais pour définir une classe sur l'en-tête de l'onglet actif (je peux utiliser la classe active ajoutée par ui.bootstrap et obtenir le même résultat, je le fais en tant que Exemple):

angular.module('test', ['ngAnimate', 'ui.bootstrap']);
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");
 .test {
  background: dodgerblue;
}
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>

<div ng-app="test">
  <uib-tabset active="active">
    <uib-tab index="0">
      <uib-tab-heading ng-class="{test:active==0}">Static title1</uib-tab-heading>Static content1
    </uib-tab>
    <uib-tab index="1">
      <uib-tab-heading ng-class="{test:active==1}">Static title1</uib-tab-heading>Static content2</uib-tab>
    <uib-tab index="2">
      <uib-tab-heading ng-class="{test:active==2}">Static title1</uib-tab-heading>Static content3</uib-tab>
  </uib-tabset>
</div>
2
T J