Réglage de l'onglet actif sur de créer dynamiquement des onglets Angulaire UI Bootstrap

J'ai une dynamique tabset qui génère les onglets à partir d'un tableau qui commence à blanc. Quand j'ajoute un nouvel élément au tableau, il apparaît comme un nouvel onglet. Je veux le dernier onglet à être active. J'ai mis l'index actif à chaque fois que j'ajoute un élément dans le 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 la Débarquez pour la totalité du code source de la démo: https://plnkr.co/edit/TX6ek4R62AfM2zUXcoC3?p=preview

Le problème est qu'il semble être de travailler avec un nombre impair d'onglets. Voici ce que je veux dire:

Sur chargement initial, il ressemble à ceci:

Réglage de l'onglet actif sur de créer dynamiquement des onglets Angulaire UI Bootstrap

Après je ajouter un nouvel onglet, il montre de l'actif correctement:

Réglage de l'onglet actif sur de créer dynamiquement des onglets Angulaire UI Bootstrap

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

Réglage de l'onglet actif sur de créer dynamiquement des onglets Angulaire UI Bootstrap

Et sur la 3ème, il commence à travailler de nouveau:

Réglage de l'onglet actif sur de créer dynamiquement des onglets Angulaire UI Bootstrap

Donc pour le même actif numéros d'index (0, 2), il fonctionne très bien. Mais de toute façon au lieu de Acitve Index: 1, il montre vide et ne définit pas l'onglet actif. Je vous écris de la variable de la console et il affiche toutes les valeurs correctement.

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

Grâce.

OriginalL'auteur Volkan Paksoy | 2016-04-05

  1. 17

    Selon docs:

    active (par Défaut: Indice de la première page) - index Actif de l'onglet. Mettre ce paramètre à un onglet existant indice que l'onglet actif.

    Assurer les onglets tableau contient l'active, 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

    Merci. Délai d'attente semble faire l'affaire, mais il ne peut toujours pas comprendre pourquoi il fonctionne la moitié du temps sans elle. Des commentaires sur l'apparence étrange comportement?
    Bonne question, j'ai aussi le sentiment confus pourquoi il travaille pour l'étrange onglets.
    J'ai posé cette question sur GitHub et le PM du projet a répondu que des questions similaires ont été signalées et qu'elles ne prennent pas en charge dynamique des onglets. Ressemble réglage de l'index à l'intérieur de délai d'attente est officiellement recommandé solution. Donc je vais l'accepter comme réponse. Par souci d'exhaustivité, voici le thread, j'ai obtenu la réponse: github.com/angular-ui/bootstrap/issues/611
    Merci pour le partage

    OriginalL'auteur huan feng

  2. 0

    J'ai eu le même problème, Mais un peu plus Complexe. J'ai chargé ma dynamique des onglets à partir de l'API, et j'ai eu un statique onglet et le reste 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;

    Tout d'abord, j'ai chargé ma dynamique des onglets à partir de l'API, Puis dans la réussite de rappel, j'ai précisé que la valeur de activeTabIndex des onglets tableau. Puis j'ai changé la valeur de showTabs de vrai.

    Je l'ai partagé, espère juste que ça peut aider plus de gens à cette affaire.

    OriginalL'auteur Roham Rafii