Menu bar Malfunctioning with AngularJs

Question

I am bit new to AngularJs so I have got stuck into the problem. Let me explain what I want to achieve.

I have design two div with child and parent relation.

  // first parent div
 <div>
    <div>
        child div  // show/hide content of this div
    </div>

</div>


 // second parent div
<div>
    <div>
        child div  // show/hide content of this div
    </div>

</div>

When I hover or move the mouse over parent div it should hide/show the respective child div.
But with my code on hover it hides/shows the content of both the child div.What changes do I have to do in code?

See complete code

<body ng-app="app">
 <div ng-app="headermain" ng-controller="headerController">
    <div class="top-menu col-xs-36 ">

           // parent div one

        <div class="menu-item col-xs-6"  ng-mouseover="hoverIn()" style="background-color:pink">
            <span >Parent one</span>

            // child div, want to hide/show content of this div

            <div class="drop-down;col-xs-10" ng-show="showMe" ng-mouseleave="hoverOut()" style="background-color:pink">
                <ul>
                    <li>child one details</li>
                    <li>parent one detail</li>
                </ul>
            </div>


        </div>

          // parent div two
        <div class="menu-item col-xs-6" ng-mouseover="hoverIn()">
            <span >Parent two</span>

                 // child div, want to hide/show content of this div

            <div class="drop-down;col-xs-10" ng-show="showMe" ng-mouseleave="hoverOut()">
                <ul>
                    <li>child two  Details</li>
                    <li>parent two detail</li>
                </ul>
            </div>


        </div>


    </div>

</div>

Controller for this code, see below

 var app = angular.module("app", []);
 app.controller("headerController",function($scope){

    $scope.hoverIn = function(){
   this.showMe = true;

      };

    $scope.hoverOut = function(){
    this.showMe = false;
      };

 });

Css file

    .top-menu {
overflow: hidden;
 }

.top-menu .drop-down {

position: absolute;
top: 20px;
z-index: 10000;
background-color: white;
box-shadow: 0px 0px 3px rgb(241, 241, 241);
border: 1px solid #d1d1d1;
} 

.top-menu .drop-down ul {
padding: 0px;
margin: 0px;
list-style-type: none;
min-width: 180px;
}

Vivz · Accepted Answer · 2017-07-04 05:18:51Z

1

You have to change the name of your functions since both div's are using the same function and changing the same attribute showMe.

HTML:

<body ng-app="app">
    <div ng-app="headermain" ng-controller="headerController">
        <div class="top-menu col-xs-36 ">

            // parent div one

            <div class="menu-item col-xs-6" ng-mouseover="hoverIn(1)" style="background-color:pink">
                <span>Parent one</span> // child div, want to hide/show content of this div

                <div class="drop-down;col-xs-10" ng-show="showMe[1]" ng-mouseleave="hoverOut(1)" style="background-color:pink">
                    <ul>
                        <li>child one details</li>
                        <li>parent one detail</li>
                    </ul>
                </div>

            </div>

            // parent div two
            <div class="menu-item col-xs-6" ng-mouseover="hoverIn(2)">
                <span>Parent two</span> // child div, want to hide/show content of this div

                <div class="drop-down;col-xs-10" ng-show="showMe[2]" ng-mouseleave="hoverOut(2)">
                    <ul>
                        <li>child two Details</li>
                        <li>parent two detail</li>
                    </ul>
                </div>

            </div>

        </div>

    </div>

JS:

  $scope.showMe=[];
  $scope.hoverIn = function(id) {
         $scope.showMe[id] = true;
     };
     $scope.hoverOut = function() {
         $scope.showMe[id] = false;
     };

edited Jul 4, 2017 at 5:18

answered Jul 4, 2017 at 5:06

Vivz

6,6282 gold badges19 silver badges34 bronze badges

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

3 Comments

Aamir Over a year ago

I want to achieve it with single function,reason is if I have 10 menu item I have to write 10 different function for that which is not a good approach

Vivz Over a year ago

Then you can pass a parameter to the function and check -> If this is the parameter, show/hide this div( meaning trigger that div).

Vivz Over a year ago

Glad to help :) Please accept the answer if it helped you.

Collectives™ on Stack Overflow

Menu bar Malfunctioning with AngularJs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related