I'm looking to organize my content using a two-tab menu system. When clicking on an option in either menu, the page's contents will be filtered and displayed based on specific parameters using Angular filters. The filter functionality is working well, and the content is being displayed as expected. However, I'm encountering an issue where selecting an option from one menu makes the previously selected option inactive.
In essence, I want both tabs from each menu to remain active simultaneously.
Code Snippet
<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 Logic
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;
}
});