web-dev-qa-db-fra.com

Définition de l'onglet actif sur les onglets créés dynamiquement avec Angular UI Bootstrap

J'ai un onglet dynamique qui génère les onglets à partir d'un tableau qui commence blanc. Lorsque j'ajoute un nouvel élément au tableau, il apparaît sous la forme d'un nouvel onglet. Je veux que le dernier onglet ajouté soit actif. Je règle l'index actif chaque fois que j'ajoute un élément au tableau

HTML:

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

JavaScript:

$scope.activeTabIndex = 0
$scope.tabs = [];

$scope.addTab = function() {
    var newTab = {  title: 'Tab ' + ($scope.tabs.length + 1) };
    $scope.tabs.Push(newTab); 
    $scope.activeTabIndex = ($scope.tabs.length - 1);
    console.log($scope.activeTabIndex);
};

Voici le Plunk pour le code source complet de la démo: https://plnkr.co/edit/TX6ek4R62AfM2zUXcoC3?p=preview

Le problème est qu'il semble fonctionner uniquement avec un nombre impair d'onglets. Voici ce que je veux dire:

Au chargement initial, il ressemble à ceci:

 enter image description here

Après avoir ajouté un nouvel onglet, l’affichage actif s’affiche correctement:

 enter image description here

Quand j'en ajoute un autre, rien n'est sélectionné et la variable activeTabIndex devient indéfinie:

 enter image description here

Et sur le 3ème ça recommence à fonctionner:

 enter image description here

Donc, même pour les index actifs (0, 2), cela fonctionne bien. Mais quelque part, au lieu de Acitve Index: 1, il est vide et ne définit pas l'onglet actif. J'écris la variable à la console et il affiche toutes les valeurs correctement.

Toute aide/pointeurs/idées sont les bienvenues.

Merci.

angularjsangular-ui-bootstrap
11
Volkan Paksoy

Selon docs :

active (Par défaut: Index du premier onglet) - Index actif de l'onglet. Si vous définissez ceci sur un index de tabulation existant, cet onglet sera actif.

Assurez-vous que le tableau tabs contient celui qui est actif, je pense que vous devriez ajouter un timeout $:

      $scope.addTab = function() {
        var newTab = {  title: 'Tab ' + ($scope.tabs.length + 1) };
        $scope.tabs.Push(newTab); 
        $timeout(function(){
          $scope.activeTabIndex = ($scope.tabs.length - 1);
        });
        console.log($scope.activeTabIndex);
      };

https://plnkr.co/edit/q4QP7zoB0HXSjn3MplE4?p=preview

17
huan feng

J'ai eu le même problème, mais un peu plus complexe. J'ai chargé mes onglets dynamiques à partir de l'API. J'avais un onglet statique et le reste était dynamique.

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

J'ai utilisé deux variables avec des valeurs par défaut:

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

D'abord, j'ai chargé mes onglets dynamiques à partir de l'API, puis dans le rappel de réussite, j'ai spécifié la valeur de activeTabIndex à partir du tableau d'onglets. Ensuite, j'ai changé la valeur de showTabs en true.

Je l'ai partagé, j'espère juste que cela pourra aider plus de gens avec cette affaire.

0
Roham Rafii