Bootstrap 3: Açısal js kullanarak sekmesinin seçimini kaldırın

Açısal j ve önyükleme 3 ile çalışıyorum ve uygulamanız şu şekilde çalışıyor ... Birkaç sekme ile bir div gösterip bir tane seçebilmenizi sağlayan birkaç bağlantınızın olduğu bir görünüm var. onların Bu iyi çalışıyor. Ancak sekmeyi bir tıklama ile değiştirirseniz ve daha sonra başka bir tıklama üzerine tıkladığımda sekmelerle görünümü gizlersem, sekmelerle görünümü gösterir, sekmeden bağlantıyı seçtim, doğru, ama ... önceki sekmeyle tıklandı.Bootstrap 3: Açısal js kullanarak sekmesinin seçimini kaldırın

Yaptığım sekmeyi nasıl seçebilirim?

Düzenleme 1:

benim sorunu daha iyi anlatmaya çalışacağım için çeşitli ekran görüntüleri göndermek için gidiyorum.

Düzenleme 2:

Ben kodumu nasıl çalıştığını göstermek için bu plunker ekleyin ve bir sekmede orayı tıkla eğer sonradan döner bir düğmeyi tıklayarak eğer, doğru sekmesini seçin olmadığını kontrol edebilirsiniz. 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; 
} 

});

Düzenleme 3:

Daha sorunlar:

Benim kod

, bende sekmeler ve Bootstrap takvim ve verilen çözüm ile önyükleme takvimi olmaksızın para cezası verilir, ancak önyükleme takvimi eklerseniz, bu doğru şekilde çalışmaz.

benim Origina plunker modifiye ettim ve bu kütüphaneler bir önyükleme takvim eklendi ve değişim var: Bu By

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

: Üzerinde var bu kütüphanelerin

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

kodu plunker. Ayrıca bootstrap takvimini yöneten kontrol cihazını ekledim.

Tamam, biz plunker giderse; https://plnkr.co/edit/PaSqa0jxQjz48pzcmBMa

Biz biz doğru olduğundan bugünden + 1 daha büyük gün seçemezsiniz bir önyükleme takvimi olduğunu görebilirsiniz! Ancak, "Sekme 2" düğmesine tıklarsam, görebildiğimiz Sekme 2 değil, 1'dir. Eğer sekme 3 ile aynı şeyi yaparsam, aynı sonucu elde ederim. Bu yanlış.Doğru işlevsellik Eğer "Tab 2" butonuna tıklarsam, örneğin sekme 2'yi görebiliriz.

Tamam, plunker bir değişiyorsa bu kütüphaneler ... çözeltide verilen By

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

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

sekmeler doğru şekilde çalıştığını görebiliyoruz ama önyükleme takvim bugün + 1'den daha büyük günler seçmenizi sağlar. Bu yanlış!

kaynak

2016-03-31 José Carlos

Çok kafa karıştırıcı soru. Bir plunker yapabilir misin? –

Veya bahsettiğiniz sekme sekmesinde sekmenin ekran görüntüsünü ekleyin. Eminim yeterince basit bir şey olabilir, belki de div içeriğini değiştiren bir kod snippet'i ve bir ekran görüntüsü önce ve sonra iyi bir başlangıç olur. – Jeremy

Tamam. İlk önce bazı ekran görüntüleri yayınlarım ve daha sonra bir plunker yapmaya çalışacağım. Cevaplarınız için teşekkürler!!! –

Bunun için angular-ui-bootstrap tabs'u kullanmanızı öneririz. Önyükleyici işlevlerinin çoğunda (çoğunlukla yönergeler) açısal sargılar sağlar, bu nedenle bu tür şeyleri yazmayı daha kolay hale getirir (ve aşağıda göreceğiniz gibi kod daha temizdir). Ben mümkün olduğunca minimal olarak plunkr modifiye ama ui-önyükleme sekmelerin faydalanmak için değiştirdi: https://plnkr.co/edit/qqvY2acsZWbkyFCCT7qr?p=info

Yeni Denetleyici:

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 değiştirir:,

<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 hangi <uib-tabset> adresindeki active özniteliğine geçirilmekte olan sadece geçerli olan sekmenin dizinini temsil eder, sadece değerini değiştirmek sadece hangi sekmenin açık/görünür olacağını değiştirir. Bu direktifler için kullanılabilecek bazı nitelikler daha vardır (bunları, yukarıda bağlandığım sayfada görebilirsiniz), ancak bu, bu sekme yönergelerinin nasıl kullanılabileceğinin temelini gösterir. Bu değişikliklerden sonra anlattığınız sorunu görmedim.

kaynak

2016-04-15 23:23:53 CShark

Teşekkürler Çok @CShark !!! İyi çalışıyor!!! –

Bu çözümü benim koduma benimsemeye çalışıyorum ve işe yaramıyor! Ne olduğunu bilmiyorum! self.active özelliği çalışmıyor! Her zaman sekme 1'i açın: S –

Sabit! Nedenini bilmiyorum, ama self.active özelliği aktif etkin güncellenmemiş! $ Scope.active için self.active değerini değiştirmek zorundayım ve şimdi iyi çalışıyor! –

Bootstrap 3: Açısal js kullanarak sekmesinin seçimini kaldırın

cevap

İlgili konular