8

Ho le schede di avvio angolari nel seguente formato. (vedere il plunker)schede di avvio angolare - selezionare la funzione richiamata nel caricamento della pagina

La funzione di selezione deve attivarsi quando le schede sono selezionate. Ma stranamente, quando la pagina viene caricata, viene attivata la funzione di selezione della prima scheda. (Stampa scheda selezionata dinamica Titolo 1 onload ..)

"http://plnkr.co/edit/vyOOhCdIl7s1Wvou7Dr9?p=preview" 

angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope) { 
 
    $scope.tabs = [ 
 
    { title:'Dynamic Title 1', content:'Dynamic content 1' }, 
 
    { title:'Dynamic Title 2', content:'Dynamic content 2' }, 
 
    { title:'Dynamic Title 3', content:'Dynamic content 3' } 
 
    ]; 
 
    
 
    $scope.tabSelect = function(title){ 
 
    console.log("tab selected "+title); 
 
    }; 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!doctype html> 
 
<html ng-app="ui.bootstrap.demo"> 
 
    <head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script> 
 
    <script src="example.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 
    <div ng-controller="TabsDemoCtrl"> 
 
     <tabset> 
 
     <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled" select="tabSelect(tab.title)"> 
 
      {{tab.content}} 
 
     </tab> 
 
     </tabset> 
 
    </div> 
 
    </body> 
 
</html>

+3

[ 'select() (Defaults : null): un'espressione facoltativa chiamata quando la scheda è attivata'] (https://angular-ui.github.io/bootstrap/#/tabs), quindi ha senso, durante il caricamento di default la prima scheda viene attivata e si attiva il evento. – PSL

+0

c'è un modo per evitarlo nel caricamento della pagina? – Sanath

+2

Guardando attraverso il codice sorgente di angular-ui non sembra esserci alcun modo per specificarlo. Comunque puoi facilmente fare 'var firstTime = true; $ scope.tabSelect = function (title) { if (firstTime) { firstTime = false; ritorno; } console.log ("scheda selezionata" + titolo); }; ' – miensol

risposta

2

cambiare la vostra Selezionare per ng clic in questo modo:

<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" ng-click="tabSelect(tab.title)"> 
Problemi correlati