Tab highlighting based on buttons in angularjs - html

Question

I have 3 tabs in my application, as below:
<li ng-class="{ active: isActive('#one')}"><a data-toggle="tab" class="tab-txt-color" href="#one" ng-click="selectTab('fruits')">Fruits</a></li>
<li ng-class="{ active: isActive('#two')}"><a data-toggle="tab" class="tab-txt-color" href="#two" ng-click="selectTab('veggies')">Veggies</a></li>
<li ng-class="{ active: isActive('#three')}"><a data-toggle="tab" class="tab-txt-color" href="#three" ng-click="selectTab('decors')">Decors</a></li>
.js
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
For above code, when any of the tab is clicked it gets highlighted.
But I have previous and next buttons added to the content of above tabs. How do I make the respective tab active when clicked on previous button.
<div>
.......
......
....(content of Veggies tab)
[End of this tab there are 2 buttons]
<div class="col-md-12 col-lg-12" style="margin-top:20px;" align="right">
<img src="core/static/images/previous-btn.gif" border="0" ng-click="selectTab('fruits')">
<img src="core/static/images/next-btn.gif" border="0" ng-click="selectTab('decors')">
</div>
Please help. thanks in advance!

Answer 1

I have an answer if you need the next and previous actions should work on sequence.
Add an array of tabs with its names and a variable to store the current tab name
$scope.tabs = ["fruits","veggies","decors"];
$scope.currentTab = "";
Add 2 more methods for Previous and Next button click
$scope.nextTab = function(){
if($scope.currentTab == ""){
$scope.selectTab(tabs[0]);
}
else {
var index = $scope.tabs.indexOf($scope.currentTab);
var nextIndex = ((index + 1) < $scope.tabs.length) ? (index+1) : 0;
$scope.selectTab($scope.tabs[nextIndex]);
}
}
$scope.prevTab = function() {
if($scope.currentTab == ""){
$scope.selectTab(tabs[0]);
}
else {
var index = $scope.tabs.indexOf($scope.currentTab);
var prevIndex = ((index == 0) ? ($scope.tabs.length - 1) : (index-1);
$scope.selectTab($scope.tabs[prevIndex]);
}
}
Add one more line in selectTab method to store current tab name
$scope.selectTab = function(tab){
//other functionalities
//add this line
$scope.currentTab = tab;
}
Update click methods in Next and Previous buttons
<img src="core/static/images/previous-btn.gif" border="0" ng-click="prevTab()">
<img src="core/static/images/next-btn.gif" border="0" ng-click="nextTab()">
Hope it will help you.