Comment dire quel onglet bootstrap est sélectionné dans Angular-UI
y a-t-il un moyen de dire quel onglet a été sélectionné lors de l'utilisation des onglets Bootstrap dans Angulaire de l'INTERFACE utilisateur<!--4?
j'ai essayé de regarder le tableau de panes mais il ne semble pas être mis à jour lors de la commutation onglet. Peut-on spécifier une fonction de rappel lorsqu'un onglet est sélectionné?
mise à jour avec Exemple de code.
le code suit de très près l'exemple de L'IU Bootstrap angulaire page.
Syntaxe:
<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>
Contrôleur:
var TabsCtrl = function ($scope) {
$scope.panes = [
{ title:"Events list", template:"/path/to/template/events" },
{ title:"Calendar", template:"/path/to/template/calendar" }
];
};
5 réponses
en fait c'est très simple comme chacun pane expose le active attribut supportant la liaison de données bidirectionnelle:
<tabs>
<pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">
{{pane.content}}
</pane>
</tabs>
et ensuite un onglet actif peut être facilement trouvé, par exemple:
$scope.active = function() {
return $scope.panes.filter(function(pane){
return pane.active;
})[0];
};
en Voici un qui fonctionne plunk
si vous n'avez pas de répéteur, liez l'activité tabs (ou spans) à un tableau
<tab active="tabActivity[0]">...</tab>
<tab active="tabActivity[1]">...</tab>
et dans votre controller
$scope.tabActivity=[false,false];
alors vous pouvez obtenir l'onglet actif avec
$scope.tabActivity.indexOf(true)
Je l'ai résolu en ajoutant une méthode (onTabSelect) sur le contrôleur et en l'appelant à partir de l'événement ng-click De Tab. La solution ci-dessous a fonctionné pour moi s'il vous plaît le voir 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>
ma réponse est pour le cas où vous placez manuellement l'onglet et vous utilisez la bibliothèque de boostrap d'interface angulaire, vous pouvez utiliser le select l'attribut
<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 le showTab fonction passant par select l'attribut, vous pouvez vérifier si votre onglet est sélectionné par leur nom, comme dans mon cas.
L'exemple complet est ici angulaires de l'interface utilisateur, avis select:
la réponse acceptée ne fonctionne que pour les onglets dynamiques.
pour les onglets statiques, vous pouvez définir le active l'attribut uib-tabset directive à une propriété scope, et comparez - la avec l'index de l'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 le active classe ajoutée par l'interface utilisateur.bootstrap et obtenir le même résultat, je suis en train de faire ainsi, à titre d'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>