wake-up-neo.com

Angular UI - Aktiviert die aktive Registerkarte programmgesteuert

Ich verwende AngularUI mit diesem Code:

<uib-tabset type="pills">
    <uib-tab heading="Tab 1">Tab 1 content</uib-tab>
    <uib-tab heading="Tab 2">Tab 2 content</uib-tab>
</uib-tabset>

Ich möchte den aktuell aktiven Tag programmgesteuert von meinem Winkelsteuerungscode ändern. Wählen Sie zum Beispiel die Registerkarte "2", um aktiv zu sein. 

Wie kann das gemacht werden?

angularjsangular-ui-bootstrapangular-uiangular-ui-tabset
7
No1Lives4Ever

Sie müssen die aktive Eigenschaft für ui-tabset ..__ verwenden. Dann müssen Sie auf jeder Registerkarte Indizes haben, um außerhalb des externen Kontextes zu arbeiten. 

<uib-tabset type="pills" active="active">
    <uib-tab heading="Tab 1" index="0">Tab 1 content</uib-tab>
    <uib-tab heading="Tab 2" index="1">Tab 2 content</uib-tab>
</uib-tabset>

Siehe diesen Arbeitsplan: Arbeitsplan

12
Ashwani

Ich hatte das gleiche Problem und diese Antwort half mir, das herauszufinden.

Ich habe zwei Variablen im Geltungsbereich verwendet: $scope.showTabsInView und $scope.activeTabIndex.

Standardwerte sind:

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

Zuerst habe ich meinen dynamic tabs geladen und dann den Wert von activeTabIndex angegeben. Dann habe ich den Wert von showTabsInView in true geändert.

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

Sie können dynamic tabs und $scope.showTabsInView einfach ignorieren, wenn Ihr Fall nicht so kompliziert ist.

2
Roham Rafii