2015-12-15 11 views
8

Ho uno scenario semplice. Due schede, scheda 1 & 2. È necessario essere in grado di selezionare la scheda 1 tramite collegamento.

Html:

<p> 
    <a href="#" ng-click="selectTab1()"> 
    <span class="glyphicon glyphicon-plus-sign"></span> Select TAB 1 
    </a> 
</p> 
<uib-tabset> 
    <uib-tab heading="Tab 1" active="activeTab==true" ng-click="clickTab1()"> 
    Content 1 
    </uib-tab> 
    <uib-tab heading="Tab 2 (default)" active="activeTab==false" ng-click="clickTab2()"> 
    Content 2 
    </uib-tab> 
</uib-tabset> 

Controller cod qui:

$scope.activeTab = false; 

    $scope.selectTab1 = function() { 
    $scope.activeTab = true; 
    } 
    $scope.clickTab1 = function() { 
    $scope.activeTab = true; 
    } 
    $scope.clickTab2 = function() { 
    $scope.activeTab = false; 
    } 

Plunker è qui: http://plnkr.co/edit/5yBHmXZBHyWYZEtmshad?p=info

Cliccando in Tab 1 o 2, sto ottenendo il seguente errore:

Error: [$compile:nonassign] Expression 'activeTab==true' used with directive 'uibTab' is non-assignable! 

Potrei cambiare questa espressione 'activeTab==true' in un modo più breve come 'activeTab' ma non sembra funzionare.

risposta

9

E 'meglio per aggiornare una variabile ambito e associarlo al active attributo delle schede:

$scope.activeTab = []; 

$scope.selectTab1 = function(index) { 
    $scope.activeTab[index] = true; 
    }; 

$scope.clickTab = function(index) { 
    $scope.activeTab[index] = true; 
}; 

Secondo lei:

<uib-tab heading="Tab 1" active="activeTab[0]" ng-click="clickTab(0)"> 
    Content 1 
</uib-tab> 
<uib-tab heading="Tab 2 (default)" active="activeTab[1]" ng-click="clickTab(1)"> 
    Content 2 
</uib-tab> 

Ho aggiornato il plunkr

Questo rende anche l'implementazione più riutilizzabile rispetto a prima (ad esempio, può essere facilmente utilizzata all'interno di uno ng-repeat se è necessario es).

Riferimento: GitHub Issue

+0

Grazie! totalmente inchiodato. –

+0

WOW Superbo ..!. ottimo lavoro .. –

+0

Funziona perfettamente con 'ng-repeat'. Grazie! – KKK

1

Per l'ultima versione di UIB (2.4.0) che dovrebbe essere simile a questo:

In regolatore:

$scope.activeTab = 1; 

In considerazione:

<uib-tabset active="activeTab"> 
    <uib-tab index="0" heading="Tab 1"> 
     Content 1 
    </uib-tab> 
    <uib-tab index="1" heading="Tab 2"> 
     Content 2 
    </uib-tab> 
</uib-tabset> 
Problemi correlati