Kermani Kermani - 5 months ago 34
AngularJS Question

How to hide/show elements in Angular 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

Answer

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