Question

我想使用两个标签菜单对我的内容进行分类，当点击两个菜单上的任何选项时，页面上的内容将使用参数作为角度过滤器的基础进行组织。过滤器工作正常，内容完美显示，但每次选择第一个选项后选择任何选项。菜单中先前选择的选项变为非活动状态。

简而言之。我希望同时看到两个活动标签，每个标签来自两个菜单。

标记

<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;
}
});

Answer 1

看起来您正在使用相同的变量来跟踪两者。一个变量只能有一个值，因此您无法轻松跟踪两件事。

您可能只需要为垂直选项卡组使用一个变量，为水平选项卡组使用一个变量。

创建Sub test() Dim r As Range Dim A As Variant Set r = Range("A1:A40") A = arraydemo(r) For i = 1 To UBound(A) Range("A1").Offset(i) = A(i, 1) Range("A1").Offset(i).NumberFormat = "0" Next End Sub和select2()方法，并为这些方法使用另一个变量，而不是共享他们将使用isSelected2()变量的tab变量。

这是一个展示工作解决方案的JS小提琴：

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

Boostrap和Angular：同时保持两个标签处于活动状态。

1 个答案: