ブートストラップ3：角度jsを使用してタブを選択解除します

角度のjsとブートストラップ3で動作しています。私のアプリは次のように動作します...複数のタブでdivを表示し、そのうちの。これは正常に動作します。しかし、私はそれを上にクリックしてタブを変更し、私は別のクリックをクリックするとタブでビューを非表示、私は、タブで、リンクから選択されたタブでビューを表示する、それは正しいです...前のタブをクリックします。ブートストラップ3：角度jsを使用してタブを選択解除します

私はクリックしたタブの選択を解除できますか？

編集1：

私は私の問題をよりよく説明しようとするために、いくつかのスクリーンショットを投稿するつもりです。

編集2：

は、私はそれが私のコードをどのように動作するかを表示するには、このplunkerを追加し、あなたがタブにCLIC場合、後で戻って、ボタンをクリックした場合、あなたは正しいタブを選択していないことを確認することができます。 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; 
} 

});

編集3：

その他の問題：私のコードで

、私はタブとブートストラップを持っていますカレンダーと与えられた解wブートストラップカレンダーなしでうまくいっていますが、ブートストラップカレンダーを追加すると正しく動作しません。

私はoriginaのplunkerを変更したと私は、ブートストラップカレンダーを追加し、これらのライブラリ変更：あなたは上で持っているこれらのライブラリのコードを

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

をプランカ。さらに、私はブートストラップカレンダーを管理するコントローラを追加しました。

[OK]を、私たちはplunkerに行く場合：https://plnkr.co/edit/PaSqa0jxQjz48pzcmBMa

私たちは、私が正しいです今日+ 1より大きい日を選択することはできませんブートストラップのカレンダーを持っていることを見ることができます！しかし、私がボタン「タブ2」をクリックすると、私たちが見ることができるタブは2ではなく、1です。私がタブ3と同じことをすると、同じ結果が得られます。それは間違っている。正しい機能は次のとおりです。「Tab 2」ボタンをクリックすると、たとえばタブ2が表示されます。

[OK]を、私はplunkerに変更した場合は、これらのライブラリ...溶液中で与えられたことで

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

タブが正しく動作することを私たちは見ることができますが、ブートストラップカレンダーあなたは今日+ 1より大きな日を選択することができます。これは間違っています！

出典

2016-03-31 José Carlos

とても混乱しやすい質問です。あなたはプランカを作れますか？ –

あなたが言及したタブのタブにタブのスクリーンショットを追加します。私はそれが何かシンプルなものだと確信しています。多分、あなたがdivコンテンツの変更や前後のスクリーンショットを扱うコードスニペットが良いスタートになるでしょう。 – Jeremy

OK。まず、いくつかのスクリーンショットを投稿し、後でプランナーを作ろうとします。あなたの答えをありがとう！ –

これにはangular-ui-bootstrap tabsを使用することをおすすめします。これはブートストラップ機能の大部分（ほとんどはディレクティブ）の周りにラッパーを提供するので、これらのタイプのものを書くのがはるかに簡単になります（そして、コードはより洗練されています。私は、可能な限り最小限としてあなたplunkrを変更しますが、UI-ブートストラップタブを利用するために、それを変更：https://plnkr.co/edit/qqvY2acsZWbkyFCCT7qr?p=info

新しいコントローラ：

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が変更されます。

<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、 <uib-tabset>のactive属性に渡されます。現在開いているタブのインデックスを表しているだけなので、その値を変更すると、開いている/表示されているタブが変更されます。これらのディレクティブに使用できる属性がいくつかあります（上にリンクされているページでそれらを見ることができます）。しかし、これはこれらのタブディレクティブの使用方法の基礎を示しています。私はあなたがこれらの変更後に上記で説明した問題を見ていない。

出典

2016-04-15 23:23:53 CShark

ありがとうございます@CShark !!!それはうまく動作します！ –

私はこのソリューションを私のコードに採用しようとしています...それは動作しません！私は何が起こったのかわからない！ self.activeプロパティが動作しません！常にタブ1を開く：S –

修正済み！なぜ私は知りませんが、self.activeのプロパティは正しく更新されていません！私は$ scope.activeのためにself.activeを変更しなければなりません。 –

ブートストラップ3：角度jsを使用してタブを選択解除します

答えて

関連する問題