AngularJS enables tab highlighting by responding to button selections

Question

AngularJS enables tab highlighting by responding to button selections

In my application, there are 3 tabs set up as follows:

<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>

Code in .js file:

 $scope.isActive = function (viewLocation) { 
    return viewLocation === $location.path();
  };
    

When a tab is clicked, it becomes highlighted.

I have added previous and next buttons to each tab's content. How can I make the respective tab active when clicking on the previous button?

  <div>
 .......
 ......
 ....(content of Veggies tab)
 [At the end of this tab, there are 2 buttons]

 <div class="col-md-12 col-lg-12" style="margin-top:20px;" align="right">
 <a href="#"><img src="core/static/images/previous-btn.gif"  border="0" ng-click="selectTab('fruits')"></a>
 <a href="#"><img src="core/static/images/next-btn.gif"  border="0" ng-click="selectTab('decors')"></a>
</div>

html css angularjs

Answer 1

Answer №1

If you require the next and previous actions to work sequentially, I have a solution for you. Simply add an array of tabs with their names and a variable to hold the current tab name:

$scope.tabs = ["fruits", "veggies", "decors"];
$scope.currentTab = "";

Additionally, include two more methods for handling the Previous and Next button clicks:

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

Include a line in the selectTab method to update the current tab name:

$scope.selectTab = function(tab){
    //other functionalities

    //add this line
    $scope.currentTab = tab;
}

Don't forget to update the click methods in the Previous and Next buttons:

<a href="#"><img src="core/static/images/previous-btn.gif" border="0" ng-click="prevTab()"></a>
<a href="#"><img src="core/static/images/next-btn.gif" border="0" ng-click="nextTab()"></a>

I hope this information proves useful to you.

Answer 2

If you require the next and previous actions to work sequentially, I have a solution for you. Simply add an array of tabs with their names and a variable to hold the current tab name:

$scope.tabs = ["fruits", "veggies", "decors"];
$scope.currentTab = "";

Additionally, include two more methods for handling the Previous and Next button clicks:

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

Include a line in the selectTab method to update the current tab name:

$scope.selectTab = function(tab){
    //other functionalities

    //add this line
    $scope.currentTab = tab;
}

Don't forget to update the click methods in the Previous and Next buttons:

<a href="#"><img src="core/static/images/previous-btn.gif" border="0" ng-click="prevTab()"></a>
<a href="#"><img src="core/static/images/next-btn.gif" border="0" ng-click="nextTab()"></a>

I hope this information proves useful to you.

AngularJS enables tab highlighting by responding to button selections

Answer №1

Similar questions

div not recognizing the minimum height specified in percentage

Internet Explorer experiencing difficulties displaying elements

The submission directed me to the PHP webpage

Performing a usemin with Grunt to retrieve the ultimate directory of compressed files for preloading purposes

What is the best way to ensure that each box remains separate and does not overlap with the box next to it?

Tips for adjusting the width of ngx bootstrap modal?

Creating a progress bar with blank spaces using HTML, CSS, and JavaScript

Using Jquery to allow users to dynamically add <a href> links to localstorage

Copying an HTML <div> and inserting it into a database involves capturing the input text value as part of the process

Enhancing List Page Functionality with AngularJS/MVC5 Search Feature

How do you invoke a function from within another function in AngularJS?

Having trouble locating the search bar element on Walmart's website?

Ways to incorporate the setTimeOut function

Increasing box width in Django

Tips for adjusting border colors based on the current time

How come jQuery is retaining the original DOM element classes even after I have modified them using jQuery?

I'm having trouble getting Pycharm to locate my static files

Explore the world of HTML by uncovering both the tags and

What are some methods to prevent cookies from being overridden?

Updating a CSS file through jQuery is proving to be ineffective