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：同时保持两个选项卡处于活动状态。

回答

相关问题