Bootstrap 3: deseleziona la scheda usando jular angolare

Sto lavorando con angular js e bootstrap 3 e la mia app funziona come ... Ho una vista in cui hai diversi link che ti permettono di mostrare un div con diverse schede e selezionarne uno di loro. Funziona bene Ma se cambio la scheda con un clic su di essa e poi nascondo la vista con le schede quando faccio clic su un altro clic mostro la vista con le schede, con la scheda selezionata dal link, è corretto, ma ... con la scheda precedente cliccata.Bootstrap 3: deseleziona la scheda usando jular angolare

Quindi, come posso deselezionare la scheda in cui sono stato fatto fare clic su di esso?

Edit 1:

ho intenzione di inviare diversi screenshot per cercare di spiegare meglio il mio problema.

Edit 2:

aggiungo questo plunker per mostrare come funziona il mio codice e si può verificare che se si clicca su una scheda, se i rendimenti successivi clic su un pulsante non si seleziona la scheda corretta. https://plnkr.co/edit/y22T01OwxgttDWM1mJeH

HTML:

<body ng-controller="MainCtrl as ctrl"> 
    <button id="bTab1" ng-click="ctrl.buttonClicked($event)"> 
     Tab 1 
    </button> 
    <button id="bTab2" ng-click="ctrl.buttonClicked($event)"> 
     Tab 2 
    </button> 
    <button id="bTab3" ng-click="ctrl.buttonClicked($event)"> 
     Tab 3 
    </button> 
    <div ng-show = "ctrl.show_tabs"> 
     <div class = "row" style = "text-align: right; margin-top: 10px"> 
     <button ng-click="ctrl.closeTab()"> 
      Hide Tabs 
     </button> 
     </div> 
     <ul class="nav nav-tabs" id="myTab"> 
      <li ng-class = "ctrl.active_pai"><a data-target="#pai" data-toggle="tab">PAI</a></li> 
      <li ng-class = "ctrl.active_pap"><a data-target="#pap" data-toggle="tab">PAP</a></li> 
      <li ng-class = "ctrl.active_ip"><a data-target="#ip" data-toggle="tab">IP</a></li> 
     </ul> 

     <div class="tab-content"> 
      <div class="tab-pane" ng-class = "ctrl.active_pai" id="pai">Content PAI</div> 
      <div class="tab-pane" ng-class = "ctrl.active_pap" id="pap">Content PAP</div> 
      <div class="tab-pane" ng-class = "ctrl.active_ip" id="ip">Content IP</div> 
     </div>  
    </div> 
</body>

Javascript:

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
var self = this; 

$scope.name = 'World'; 
self.show_tabs = false; 
self.active_pai = ""; 
self.active_pap = ""; 
self.active_ip = ""; 

self.buttonClicked = function(event) { 
    self.show_tabs = true; 

    if (event.currentTarget.id == "bTab1"){ 
     self.active_pai = "active"; 
     self.active_pap = ""; 
     self.active_ip = ""; 
    } 

    if (event.currentTarget.id == "bTab2"){ 
     self.active_pai = ""; 
     self.active_pap = "active"; 
     self.active_ip = ""; 
    } 

    if (event.currentTarget.id == "bTab3"){ 
     self.active_pai = ""; 
     self.active_pap = ""; 
     self.active_ip = "active"; 
    } 
}; 

self.closeTab = function(){ 
    self.show_tabs = false; 
} 

});

Edit 3:

più problemi:

schede

Nel mio codice, ho e Bootstrap calendario e con la soluzione data w funziona bene senza calendario di bootstrap, ma se aggiungi il calendario di bootstrap, questo non funziona correttamente.

Ho modificato il mio origina plunker e ho aggiunto un calendario bootstrap e modificare queste librerie:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js"></script>

Di questi:

<script type="text/javascript" src="bootstrap.min.js"></script> 
<script type="text/javascript" src="ui-bootstrap-tpls-0.14.3.min.js"></script>

Il codice di queste librerie avete ottenuto sul plunker. Inoltre ho aggiunto il controller che gestisce il calendario di bootstrap.

Ok, se andiamo al plunker: https://plnkr.co/edit/PaSqa0jxQjz48pzcmBMa

Possiamo vedere che abbiamo un calendario di bootstrap in cui non posso scegliere giorno superiore a oggi + 1. Questo è corretto! Ma, se faccio clic sul pulsante "Tab 2", la scheda che possiamo vedere non è 2, è 1. Se faccio lo stesso con la scheda 3, ho lo stesso risultato. È sbagliato.La funzionalità corretta è Se faccio un clic sul pulsante "Tab 2", possiamo vedere la scheda 2, per esempio.

Ok, se cambio sul plunker queste librerie ...

<script type="text/javascript" src="bootstrap.min.js"></script> 
<script type="text/javascript" src="ui-bootstrap-tpls-0.14.3.min.js"></script>

Entro la data nella soluzione:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js"></script>

Possiamo vedere che le linguette funziona correttamente, ma calendario bootstrap ti permette di selezionare giorni maggiori di oggi + 1. E questo è sbagliato!

fonte

2016-03-31 José Carlos

Domanda così confusa. Puoi fare un plunker? –

Oppure aggiungi uno screenshot della scheda nella sezione tab che hai menzionato. Sono sicuro che sia qualcosa di abbastanza semplice, magari un frammento di codice in cui gestisci il cambiamento del contenuto div e uno screenshot prima e dopo sarebbe un buon inizio. – Jeremy

OK. Per prima cosa, inserisco alcuni screenshot e più tardi cercherò di creare un plunker. Grazie per le tue risposte !!! –

Si consiglia di utilizzare angular-ui-bootstrap tabs per questo. Fornisce wrapper angolari attorno alla maggior parte delle funzionalità di bootstrap (per lo più direttive), quindi rende molto più facile scrivere questi tipi di cose (e il codice è più pulito, come vedremo più avanti). Ho modificato il tuo plunkr come minimamente possibile, ma cambiato di utilizzare le schede UI-bootstrap: https://plnkr.co/edit/qqvY2acsZWbkyFCCT7qr?p=info

nuovo controller:

app.controller('MainCtrl', function($scope) { 
    var self = this; 

    $scope.name = 'World'; 

    self.buttonClicked = function(index) { 
     self.show_tabs = true; 
     self.active = index; 
    }; 

    self.closeTab = function(){ 
     self.show_tabs = false; 
    } 

});

Html cambia:

<button id="bTab1" ng-click="ctrl.buttonClicked(1)"> 
     Tab 1 
</button> 
<button id="bTab2" ng-click="ctrl.buttonClicked(2)"> 
     Tab 2 
</button> 
<button id="bTab3" ng-click="ctrl.buttonClicked(3)"> 
     Tab 3 
</button> 
... 
<div ng-show = "ctrl.show_tabs"> 
... 
    <uib-tabset active="ctrl.active"> 
     <uib-tab index="1" heading="PAI">Content PAI</uib-tab> 
     <uib-tab index="2" heading="PAP">Content PAP</uib-tab> 
     <uib-tab index="3" heading="IP">Content IP</uib-tab> 
    </uib-tabset> 
</div>

ctrl.active, che è passato all'attributo active su <uib-tabset> rappresenta solo l'indice della scheda attualmente aperta, quindi basta cambiarne il valore per cambiare quale scheda è aperta/visibile. Ci sono altri attributi che possono essere usati per queste direttive (puoi vederli sulla pagina che ho collegato sopra), ma questo mostra la base di come queste direttive tab possono essere usate. Non ho visto il problema che stavi descrivendo sopra dopo questi cambiamenti.

fonte

2016-04-15 23:23:53 CShark

Grazie mille @CShark !!! Funziona bene !!! –

Sto provando ad adottare questa soluzione per il mio codice e ... Non funziona !!! Non so cosa sia successo !!! la proprietà self.active non funziona !!! Apri sempre scheda 1: S –

Risolto il problema !!! Non so perché, ma con self.active la proprietà attiva non viene aggiornata correttamente !!! Devo cambiare self.active per $ scope.active e ora funziona bene !! –

Bootstrap 3: deseleziona la scheda usando jular angolare

risposta

Problemi correlati