Show form OnClick in NavBar AngularJs

Question

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>

have you imported the "angular.js" <script src=""> ?

niXful-Autistic
– niXful-Autistic

2018-11-08 03:41:28 +00:00
Commented Nov 8, 2018 at 3:41 — niXful-Autistic
– niXful-Autistic, Commented Nov 8, 2018 at 3:41
Yes I added it but it still didnt work

HawkEye
– HawkEye

2018-11-08 04:11:05 +00:00
Commented Nov 8, 2018 at 4:11 — HawkEye
– HawkEye, Commented Nov 8, 2018 at 4:11
NinjaJami 's answer is correct, I have tried and tested it

niXful-Autistic
– niXful-Autistic

2018-11-08 04:41:56 +00:00
Commented Nov 8, 2018 at 4:41 — niXful-Autistic
– niXful-Autistic, Commented Nov 8, 2018 at 4:41

Jameel Moideen · Accepted Answer · 2018-11-08 04:31:01Z

1

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">

edited Nov 8, 2018 at 4:31

answered Nov 8, 2018 at 4:25

Jameel Moideen

8,01913 gold badges54 silver badges80 bronze badges

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

2 Comments

HawkEye Over a year ago

Its still visible when i boot up the webpage

Jameel Moideen Over a year ago

@HawkEye i just pasted your code in a plain html, removed one ng-app and added angular js library. It’s working for me. any error on console??

Immanuel Kirubaharan · Accepted Answer · 2018-11-08 08:01:27Z

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>

Collectives™ on Stack Overflow

Show form OnClick in NavBar AngularJs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related