Ways to toggle elements in AngularJS using a function that takes in the element class as a parameter similar to JQuery techniques

Question

Ways to toggle elements in AngularJS using a function that takes in the element class as a parameter similar to JQuery techniques

I've been searching for a solution to my problem, but haven't found one that meets my criteria of high performance and minimal code.

I have several drop-down menus and I'm looking for a way to toggle their visibility with just one function in JavaScript or JQuery without adding extra attributes to the HTML elements, keeping the DOM lightweight.

Consider these as my buttons (or links in HTML):

<a class="first-menu" href="#">First link</a>
<a class="second-menu" href="#">Second link</a>
<a class="third-menu" href="#">Third link</a>


<div class="first-menu-div">This is first MENU</div>
<div class="second-menu-div">This is Second MENU</div>
<div class="third-menu-div">This is Third MENU</div>

Here's an example using JQuery:

  $("a").click(function() {
    var class_name = $(this).attr('class');
    $("div").hide();
    $("." + class_name + '-div').show();
  });

Check out the simple JSfiddle demo for this functionality.

Now, I'm curious if there's a way to achieve the same functionality in Angular following Angular's best practices. For instance, we could use the following code:

<a ng-click="showHideMenu('menu1')">Show menu 1 </a>
<a ng-click="showHideMenu('menu2')">Show menu 2 </a>

And here's a possible controller implementation:

$scope.OpenHeaderMenu= function(elementClass){
                $(".menus > div").hide();
                $(elementClass).show()
                 //Imagine Angular also offers hide() and show() methods, or a way to dynamically set ng-show and ng-hide based on variables
            };

Is it possible to achieve this behavior in Angular like in JQuery, avoiding the use of ng-show and ng-hide, and adopting functional programming instead of relying on numerous if | else statements in the controller for simple menu toggling?

I anticipate having multiple menus on my pages and would prefer a straightforward function call with minimal code for better performance. I hope my inquiry is clear.

javascript jquery css angularjs performance

Answer 1

Answer №1

It seems your approach may not be the most effective as modifying DOM objects directly from a controller is generally discouraged. Instead, consider utilizing ng-show, ng-hide, and $scope in combination to update your view seamlessly.

An alternative implementation could look like this:

$scope.handleClick = function(showItem) {
    $scope.showItem = showItem;
};

In your HTML view:

<a ng-click="handleClick(true)">Show Menu 1</a>

<div ng-show="showItem">
Some item
</div>

Instead of manipulating elements directly within your controller, it's recommended to create a directive for this purpose. However, that's a different topic altogether.

I found a JSFiddle demo that might be helpful for what you're trying to achieve.

Hope this explanation clarifies things for you.

Edit: Simply pass a variable to ng-show with an expression to display elements based on specific conditions.

$scope.toggleMenu = function(item) {
    $scope.menuClass = item;
}

<a class="first-menu" ng-click="toggleMenu(1)" href="#">First Link</a>
<a class="second-menu" ng-click="toggleMenu(2)" href="#">Second Link</a>
<a class="third-menu" ng-click="toggleMenu(3)" href="#">Third Link</a>

<div class="first-menu-div" ng-show="menuClass == 1">
    This is the First Menu
</div>
<div class="second-menu-div" ng-show="menuClass == 2">
    This is the Second Menu
</div>
<div class="third-menu-div" ng-show="menuClass == 3">
    This is the Third Menu
</div>

Feel free to check out my JSFiddle example.

Answer 2

It seems your approach may not be the most effective as modifying DOM objects directly from a controller is generally discouraged. Instead, consider utilizing ng-show, ng-hide, and $scope in combination to update your view seamlessly.

An alternative implementation could look like this:

$scope.handleClick = function(showItem) {
    $scope.showItem = showItem;
};

In your HTML view:

<a ng-click="handleClick(true)">Show Menu 1</a>

<div ng-show="showItem">
Some item
</div>

Instead of manipulating elements directly within your controller, it's recommended to create a directive for this purpose. However, that's a different topic altogether.

I found a JSFiddle demo that might be helpful for what you're trying to achieve.

Hope this explanation clarifies things for you.

Edit: Simply pass a variable to ng-show with an expression to display elements based on specific conditions.

$scope.toggleMenu = function(item) {
    $scope.menuClass = item;
}

<a class="first-menu" ng-click="toggleMenu(1)" href="#">First Link</a>
<a class="second-menu" ng-click="toggleMenu(2)" href="#">Second Link</a>
<a class="third-menu" ng-click="toggleMenu(3)" href="#">Third Link</a>

<div class="first-menu-div" ng-show="menuClass == 1">
    This is the First Menu
</div>
<div class="second-menu-div" ng-show="menuClass == 2">
    This is the Second Menu
</div>
<div class="third-menu-div" ng-show="menuClass == 3">
    This is the Third Menu
</div>

Feel free to check out my JSFiddle example.

Answer 3

Answer №2

To implement ngshow without using any classes or selectors, you can refer to the code snippet below:

(function () {
  'use strict';

  angular
    .module('testApp', [])
    .controller('HeaderCtrl', function () {
      this.target =false;
  });


}());

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp">
    <div ng-controller="HeaderCtrl as hd">
      <a href="#" ng-click="hd.target= 'first'">First link</a>
      <a href="#" ng-click="hd.target= 'second'">Second link</a>
      <a href="#" ng-click="hd.target= 'third'">Third link</a>


      <div ng-show="hd.target == 'first'">
        This is first MENU
      </div>
      <div ng-show="hd.target == 'second'">
        This is Second MENU
      </div>
      <div ng-show="hd.target == 'third'">
        This is Third MENU
      </div>

    </div>
  </div>

Answer 4

To implement ngshow without using any classes or selectors, you can refer to the code snippet below:

(function () {
  'use strict';

  angular
    .module('testApp', [])
    .controller('HeaderCtrl', function () {
      this.target =false;
  });


}());

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp">
    <div ng-controller="HeaderCtrl as hd">
      <a href="#" ng-click="hd.target= 'first'">First link</a>
      <a href="#" ng-click="hd.target= 'second'">Second link</a>
      <a href="#" ng-click="hd.target= 'third'">Third link</a>


      <div ng-show="hd.target == 'first'">
        This is first MENU
      </div>
      <div ng-show="hd.target == 'second'">
        This is Second MENU
      </div>
      <div ng-show="hd.target == 'third'">
        This is Third MENU
      </div>

    </div>
  </div>

Answer 5

Answer №3

One potential solution for your issue could be utilizing ng-switch along with ng-switch-when.

$scope.selectTab = function(tabNumber){
  $scope.activeTab = tabNumber;
}

Within your HTML view, you can implement the following:

<a ng-click="selectTab(1)">Display Tab 1 </a>
<a ng-click="selectTab(2)">Display Tab 2 </a>

<ANY ng-switch="activeTab">
  <ANY ng-switch-when="1">...</ANY>
  <ANY ng-switch-when="2">...</ANY>
  <ANY ng-switch-default>...</ANY>
</ANY>

You have the option to customize the initial section of the view, this is just a hardcoded example provided for demonstration purposes.

Answer 6

One potential solution for your issue could be utilizing ng-switch along with ng-switch-when.

$scope.selectTab = function(tabNumber){
  $scope.activeTab = tabNumber;
}

Within your HTML view, you can implement the following:

<a ng-click="selectTab(1)">Display Tab 1 </a>
<a ng-click="selectTab(2)">Display Tab 2 </a>

<ANY ng-switch="activeTab">
  <ANY ng-switch-when="1">...</ANY>
  <ANY ng-switch-when="2">...</ANY>
  <ANY ng-switch-default>...</ANY>
</ANY>

You have the option to customize the initial section of the view, this is just a hardcoded example provided for demonstration purposes.

Ways to toggle elements in AngularJS using a function that takes in the element class as a parameter similar to JQuery techniques

Answer №1

Answer №2

Answer №3

Similar questions

Combining Data from Header to Body using HTML5 and JavaScript

Generating a sequential array of dates and times in Angular

What is the simplest way to display an HTTP response in an alert window?

Can you explain the differentiating factors of a document and the DOM?

Inserting items into arrays in Angular

Set a Minimum Browser Size Requirement for Your Website

jQuery is throwing an error stating that there is a missing ) after the argument list. However, even though the parentheses are closed and quotes are

Utilize VueJS to streamline your filtering process

What are the steps to secure an API endpoint using PassportJS?

Is it possible to change the background color of a MUI theme in ReactJS by using Css

Create a new tab that is active and use ng-repeat in the uib-tab directive

How can I use str.match to strip out the "$" symbol and display only the numerical value?

Adding HTML content to a DOM element using Angular

Cypress fails to log requests in the Command Log

Discover the steps to handle parameters received in a $resource GET request

Displaying data in table rows using ng-repeat

Create a new NVD3 graph with a vertical line added

The HTML5 webpage is failing to send a JQuery Ajax request

Troubleshooting Media Queries in HTML, CSS, Bootstrap: Why Aren't They Applying as Expected?

Initiate a function following a 3-second click on an image