CODEWITHSUNDEEP
javascriptangularjs
HawkEye
HawkEye

Reputation: 81

Show form OnClick in NavBar AngularJs

this is my first time coding a project on angularjs and i cant seem to figure out how to leave a form hidden until a certain button is clicked on in the navigation bar. I cannot seem to hide or make the button click properly as I dont have much knowledge on controller objects and other functions in angularjs. Please help out if yall could. Thanks in advance.

Heres the code

    <!DOCTYPE html>


<head>
    <meta charset="utf-8"/>


    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" />

    <!-- The main CSS file -->
    <link href="style.css" rel="stylesheet" />

    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>



<body ng-app>

    <div ng-app="myApp" ng-controller="myCtrl">
    <nav class="{{active}}" >

        <a href="#" class="AddItem"  ng-click="showForm = true">Add Item </a>
        <a href="#" class="DeleteItem">Delete Item</a>
        <a href="#" class="DisplayItem">Display Item</a>
        <a href="#" class="BorrowItem">Borrow Item</a>
        <a href="#" class="ReturnItem">Return Item</a>

    </nav>

        <form ng-show="showForm"ng-submit="submitForm()">
            <h1>Add Items</h1>

            <div layout="column"       layout-align="center center">
                <div> <button class="additmbtn" onclick="">Add Book</button></div>
                <div><button class="additmbtn" onclick="">Add DVD</button></div>
            </div>
        </form>

    </div>

        <script>
            var myApp = angular.module('myApp', []);

            myApp.controller('myCtrl', ['$scope',
                function($scope) {
                    $scope.showForm = false;

                    // init empty user object for our form
                    $scope.user = {};

                    $scope.submitForm = function() {
                        // logic when the form is submitted
                        //...
                    };

                }
            ]);
        </script>




</body>

Upvotes: 0

Views: 515

Answers (2)

Immanuel Kirubaharan
Immanuel Kirubaharan

Reputation: 1094

Your code seems to be fine and working perfectly here. I have created plunker of your code. Please check and don't forget to include angular library in your application which was missing. And works as you expect to make the form visible when you click on Add Item link.

    <nav>
        <a href="#" class="AddItem" ng-click="showForm=true">Add Item</a>
        <a href="#" class="DeleteItem">Delete Item</a>
        <a href="#" class="DisplayItem">Display Item</a>
        <a href="#" class="BorrowItem">Borrow Item</a>
        <a href="#" class="ReturnItem">Return Item</a>
    </nav>
    <form ng-show="showForm" ng-submit="submitForm()">
      <h1>Add Items</h1>
      <div layout="column" layout-align="center center">
        <button class="additmbtn" onclick="">Add Book</button>
        <button class="additmbtn" onclick="">Add DVD</button>
      </div>
    </form>

Upvotes: 0

Jameel Moideen
Jameel Moideen

Reputation: 7931

The issue is you are added ng-app multiple times , both in body and div. So Angular JS will throw an error

Just add either in body or div

<body>

    <div ng-app="myApp" ng-controller="myCtrl">

Or

<body ng-app="myApp">

    <div  ng-controller="myCtrl">

Upvotes: 1

Related Questions