CODEWITHSUNDEEP
javascriptjquerycssangularjsperformance
Mohammad Kermani
Mohammad Kermani

Reputation: 5396

How to hide/show elements in AngularJS like JQuery by passing element class to the function?

I searched about my problem, and I could not find my answer and I'm just looking for the solution with the best performance and less code.

I have some drop-down menus and I want to have just one function to show and hide the menus on click on their buttons, by JavaScript or by JQuery this is simple and does not add more codes (atributes) to the HTML elements and it means lighter DOM.

Imagine these are my buttons, actually my links (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>

And this can be my JQuery:

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

Simple JSfiddle demo

In this case, by a simple JavaScript (JQuery) code we can hide all menus and show the menu we need according to the class of the clicked link. We did not added attributes just for showing or hiding the menu by clicking a certain link, and we can simply expend the program by adding menu or link or even changing function.

Now I want to know how we can have something like this function in Angular and with Angular's standards. For example I can do this by these codes:

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

And here may be the controller:

$scope.OpenHeaderMenu= function(elementClass){
                $(".menus > div").hide();
                $(elementClass).show()
                 //Just imagine Angular also has hide() and show() OR A way to use variable to set ng-show and ng-hide to the elements we want
            };

Is there any way to do this by Angular like JQuery and get the rid of ng-show and ng-hide and use functional programming instead of adding attributes and lots of if | else to controller to hide or show simple menus?

I want to have these menus lots of time in my pages and I prefer to have a simple function to call and having less code and better performance.

I hope my question be clear

Upvotes: 3

Views: 13740

Answers (3)

Mohamed Elfiky
Mohamed Elfiky

Reputation: 106

You can use ngshow as the code sample below without any classes or selectors 

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

Upvotes: 5

pedrommuller
pedrommuller

Reputation: 16066

your logic is wrong, you should not be able to modify dom objects from a controller, anyway, you can use a combination of ng-show, ng-hide and $scope to update your view.

you should do something like

$scope.click= function(showitem){
    $scope.showItem = showItem;
};

in your view:

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

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

instead of modifying elements in your controller try to make a directive but that's another history.

I just googled this fiddler is something similar of what you would like to do.

hope that helps.

Edit: you just need to pass a variable to ng-show with an expression to show the element with the specified condition.

$scope.click = function(item){
    $scope.cClass = item
}

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

<div class="first-menu-div" ng-show="cClass == 1">
    This is first MENU
</div>
<div class="second-menu-div" ng-show="cClass == 2">
    This is Second MENU
</div>
<div class="third-menu-div" ng-show="cClass == 3">
    This is Third MENU
</div>

check my fiddler

Upvotes: 8

Jake
Jake

Reputation: 422

I am not sure if this solves your problem but you could use ng-switch and the ng-switch-when

$scope.click = function(itemNum){
  $scope.displayTab = itemNum;
}

in your view you could have:

<a ng-click="click(1)">Show menu 1 </a>
<a ng-click="click(2)">Show menu 2 </a>

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

You could get more creative with the top part of the view but that is just a hard-coded example

Upvotes: 0

Related Questions