Boostrap和Angular：同時保持兩個選項卡處於活動狀態。

我想使用兩個標籤菜單對我的內容進行分類，當點擊這兩個菜單上的任何選項時，頁面上的內容將使用參數作爲角度過濾器的基礎進行組織。過濾器工作正常，內容完美顯示，但每次選擇第一個選項後都會選擇任何選項。菜單中上一個選定的選項變爲無效。Boostrap和Angular：同時保持兩個選項卡處於活動狀態。

總之。我想同時看到兩個活動標籤，每個標籤都來自兩個菜單。

標記

<body ng-controller="exploreController as exploreCtrl">  
<div class="col-sm-3 sidenav"> <!--Tab Menu 1--> 
<h4>Categories</h4> 
<ul class="nav nav-pills nav-stacked"> 
    <li ng-class="{active:exploreCtrl.isSelected(0)}"><a ng-click="exploreCtrl.select(0)">New Entries</a></li> 
    <li ng-class="{active:exploreCtrl.isSelected(4)}"><a ng-click="exploreCtrl.select(4)">Art</a></li> 
    <li ng-class="{active:exploreCtrl.isSelected(5)}"><a ng-click="exploreCtrl.select(5)">Comics</a></li> 
</ul>   
</div> 

<ul class="nav nav-tabs" role="tablist" id="Tabs"> <!--Tab Menu 2--> 
    <li role="presentation" ng-class="{active:exploreCtrl.isSelected(1)}" > 
    <a role="tab" ng-click="exploreCtrl.select(1)">Projects</a></li> 

    <li role="presentation" ng-class="{active:exploreCtrl.isSelected(2)}" > 
    <a role="tab" ng-click="exploreCtrl.select(2)">Teams</a></li> 

    <li role="presentation" ng-class="{active:exploreCtrl.isSelected(3)}" > 
    <a role="tab" ng-click="exploreCtrl.select(3)">Professionals</a></li></ul> 

<div class="tab-content"> 
    <ul class="media-list tab-pane fade in active"> 
     <li ng-repeat = "proteam in exploreCtrl.proteams | filter:exploreCtrl.filtText | filter:exploreCtrl.filtText1"> 
    <div class="panel-body"> 
    <div class="media-left media-middle"> 
    <!--Content-->  
    </ul> 
    </div></div></div> 
</body>

的Javascript

var app = angular.module('exploresModule',[]); 
app.controller('exploreController',function() { 

this.tab=1; 

var proteams = [ 
    { //content }, 
this.proteams = proteams; 
this.filtText = ''; 
this.filtText = ''; 
this.select = function(setTab) { 
    this.tab = setTab; 

    if (setTab === 0) { this.filtText = "newentry"; return} 
    if (setTab === 1) { this.filtText = 'project'; return } 
    if (setTab === 2) { this.filtText = 'team'; return } 
}; 

this.isSelected = function(checkTab) { 
    return this.tab === checkTab; 
} 
});

來源

2016-03-06 Ziyad Alvi

您的意思是有內部的'ul'了'div'的？ –

您是否使用Bootstrap UI？你可以把你的代碼放到JSFiddle或Plunkr中嗎？ –

看起來你正在使用相同的變量跟蹤兩者。一個變量只能有一個值，所以你不能輕易跟蹤兩件事情。

您可能只需將一個變量用於一組垂直的製表符，一個用於水平的製表符組。

創建一個select2()和isSelected2()方法併爲這些方法使用另一個變量，而不是共享tab變量，他們將使用tab2變量。

這裏是一個JS小提琴，展示了工作的解決方案：

https://jsfiddle.net/luisperezphd/xx85s37t/

來源

2016-03-06 12:28:16

Boostrap和Angular：同時保持兩個選項卡處於活動狀態。

回答

相關問題