Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make selected menu using Angular JS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 362
    Comment on it

    Hello Reader's if you want to show user the menu which he selects then you can use the code below. This code is written in Angular JS

    <div id="main" ng-app>
        <!-- The navigation menu will get the value of the "active" variable as a class.
             The $event.preventDefault() stops the page from jumping when a link is clicked. -->
    
        <nav class="{{active}}" ng-click="$event.preventDefault()">
    
            <!-- When a link in the menu is clicked, we set the active variable -->
    
            <a href="#" class="Findnerd" ng-click="active='Findnerd'">Findnerd</a>
            <a href="#" class="Team" ng-click="active='Team'">Team</a>
            <a href="#" class="Employee" ng-click="active='Employee'">Employee</a>
            <a href="#" class="Section" ng-click="active='Section'">Section</a>
        </nav>
    
        <!-- ng-show will show an element if the value in the quotes is truthful,
             while ng-hide does the opposite. Because the active variable is not set
             initially, this will cause the first paragraph to be visible. -->
    
        <p ng-hide="active">Please click a menu item</p>
        <p ng-show="active">You chose <b>{{active}}</b></p>
    </div>
    

    Now when this code will run. It will work in two phase.
    Phase 1- a menu bar will generate which will show like Findnerd, team etc
    Phase 2- here if user click any of these links then that will will be mark as selected and it's name will print in the middle of the webpage at the same time.
    So by this code you can make your menu also selected.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: