Einstellung der aktiven Registerkarte auf dynamisch erstellten Registerkarten mit Angular UI Bootstrap

Habe ich eine dynamische tabset erzeugt, dass der Registerkarten aus einem array beginnt aus leer. Wenn ich ein neues Element hinzufügen, um das Feld es erscheint eine neue Registerkarte. Ich will, dass die zuletzt hinzugefügten Registerkarte, um die aktiven. Ich den aktiven index jedes mal, wenn ich ein Element Hinzugefügt, um das array

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);
};

Hier ist das Zupfen für den vollständigen source-code der demo: https://plnkr.co/edit/TX6ek4R62AfM2zUXcoC3?p=preview

Das problem ist, es scheint zu funktionieren, bei einer ungeraden Anzahl von tabs nur. Hier ist, was ich meine:

Beim erstmaligen laden sieht es so aus:

Einstellung der aktiven Registerkarte auf dynamisch erstellten Registerkarten mit Angular UI Bootstrap

Nachdem ich eine neue Registerkarte hinzuzufügen, es zeigt die aktiven richtig:

Einstellung der aktiven Registerkarte auf dynamisch erstellten Registerkarten mit Angular UI Bootstrap

Wenn ich ein weiteres nichts wird ausgewählt, und activeTabIndex variable wird nicht definiert:

Einstellung der aktiven Registerkarte auf dynamisch erstellten Registerkarten mit Angular UI Bootstrap

Und auf der 3. es beginnt wieder zu arbeiten:

Einstellung der aktiven Registerkarte auf dynamisch erstellten Registerkarten mit Angular UI Bootstrap

So für noch aktive index-zahlen (0, 2) funktioniert es einwandfrei. Aber irgendwie statt der Active-Index: 1 es leer anzeigt und nicht die aktive Registerkarte. Ich Schreibe die variable auf der Konsole und es zeigt alle Werte korrekt an.

Jede Hilfe/Zeiger/Ideen sind willkommen.

Dank.

InformationsquelleAutor Volkan Paksoy | 2016-04-05
  1. 17

    Laut docs:

    aktiv (Standard: Index der ersten Registerkarte) - Aktiv-index tab. Diese Einstellung zu einer bestehenden Registerkarte index werden, die Registerkarte aktiv.

    Sorgen die tabs array enthält die aktiven, ich denke, Sie sollten hinzufügen ein $timeout gibt:

          $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

    • Danke. Timeout scheint, den trick zu tun, aber kann immer noch nicht verstehen, warum es funktioniert die Hälfte der Zeit ohne Sie. Alle Kommentare auf, dass scheinbar seltsam Verhalten?
    • Gute Frage, ich fühle mich auch verwirrt, warum es funktioniert, für die ungeraden tabs.
    • Diese Frage stellte ich auf GitHub und die Uhr des Projekts geantwortet, dass ähnliche Probleme berichtet wurden und Sie nicht unterstützen, dynamische tabs. Sieht aus wie die Einstellung der index innerhalb timeout ist die offiziell empfohlene Lösung. Also ich nehme es als Antwort. Der Vollständigkeit halber hier der thread bekam ich die Antwort: github.com/angular-ui/bootstrap/issues/611
    • Vielen Dank für den Austausch
    InformationsquelleAutor huan feng
  2. 0

    Ich hatte das ähnliche problem, Aber ein wenig Komplexer. Ich lud meine dynamische Registerkarten aus der API, und ich hatte eine statische Registerkarte, und der rest waren dynamisch.

    <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>

    Ich zwei Variablen mit default-Werten:

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

    Ersten, die ich geladen meine dynamische Registerkarten aus der API, Dann in der Erfolgs-callback, ich angegeben wird der Wert des activeTabIndex von tabs array. Dann änderte ich den Wert von showTabs zu wahren.

    Teilte ich es, hoffe nur, es kann helfen, mehr Menschen mit diesem Fall.

    InformationsquelleAutor Roham Rafii
Schreibe einen Kommentar