Show / Hide elements with AngularJs

Question

I was trying to show and hide an element child, so when I hover over a <li> element, I set up a ng-show with value false for all the elements. If I try to make the value true to show, it shows me all the child elements. I just want to display for each element hovered its child:

HTML CODE:

<ul ng-init="show=false">
    <li>
        <a class="list-group-menu" href="#"><div class="icon-user"></div></a>
        <div ng-show="show"> Profile </div>
    </li>
    <li>
        <a class="list-group-menu" href="#"><div class="icon-scope"></div></a>
        <div ng-show="show"> Scope </div>
    </li>
    <li>
        <a class="list-group-menu" href="#"><div class="icon-job"></div></a>
        <div ng-show="show"> Job </div>
    </li>

    <li>
        <a class="list-group-menu" href="#"><div class="icon-login"></div>
            <div ng-show="show"> Login </div>
        </a>
    </li>
    <li>
    <a class="list-group-menu" href="#"><div class="icon-register"></div></a>
     <div ng-show="show"> Register </div>
    </li>
</ul>

JQUERY CODE:

$('ul li').mouseenter(function() {

   $(this).children('div').show();

});

$('ul li').mouseleave(function() {

   $(this).children('div').hide();

});

Jay Shukla · Accepted Answer · 2014-02-18 14:09:06Z

5

This is not an angular way. You should do like this.

JS

angular.module("firstApp").controller("myCtrl",function($scope) {
    $scope.allMenu = ["Profile","Scope","Job","Login","Register"];
});

HTML

<ul ng-controller="myCtrl">
    <li ng-repeat="menuName in allMenu" ng-mouseenter="show=true" ng-mouseleave="show=false">
        <a class="list-group-menu" href="#"><div class="icon-user"></div></a>
        <div ng-show="show"> {{menuName}} </div>
    </li>
</ul>

answered Feb 18, 2014 at 14:09

Jay Shukla

5,8368 gold badges35 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fabrizio Fenoglio Over a year ago

Oh, Sorry i'm really new to angularJs this solution make sense, but how can tou see i have different class inside the <div> elements, i have just to create an object similar like so? var allMenu = { [ "name": "profile", "icon":"icon-user"] }

Erti-Chris Eelmaa Over a year ago

Fabrizio; yes, try it. Though more likely allMenu = [{name:'test', custom_class:'specific_class'}, {..}], then you can use ng-class='{custom_class}'

Jay Shukla Over a year ago

As Erti-Chris said, you can use ng-class. Read this docs.angularjs.org/api/ng/directive/ngClass

dfsq · Accepted Answer · 2014-02-18 14:30:43Z

4

You don't need any javascript here at all. This is pure CSS task:

.menu .list-group-menu + div {
    display: none;
}
.menu .list-group-menu:hover + div {
    display: block;
}

for HTML:

<ul class="menu">
    <li>
        <a class="list-group-menu" href="#">
            <div class="icon icon-user">User</div>
        </a>
        <div>Profile</div>
    </li>
    <li>
        <a class="list-group-menu" href="#">
            <div class="icon icon-scope">Scope</div>
        </a>
        <div>Scope</div>
    </li>
    ...

answered Feb 18, 2014 at 14:30

dfsq

193k26 gold badges244 silver badges261 bronze badges

2 Comments

Fabrizio Fenoglio Over a year ago

That's sound good, thank you for this trick, but this one was just a question for understand how angularJs do this job. :)

dfsq Over a year ago

Sure. If you don't want to have an array of items defined in controller then you would need to write a directive.

ruedamanuel · Accepted Answer · 2014-02-18 14:16:28Z

1

You are binding all of the elements to the "show" variable, so when you flip it to true, all elements will show. If you want to use ng-show for that purpose, use an array of objects containing all of the data for the template and an ng-repeat. That will not only solve your problem but also DRY your template. I would slso suggest you look into $element so that you can stick to the angular environment and syntax instead of also having to use jquery.

answered Feb 18, 2014 at 14:16

ruedamanuel

1,9281 gold badge23 silver badges24 bronze badges

Collectives™ on Stack Overflow

Show / Hide elements with AngularJs

3 Answers 3

3 Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Related