Show form OnClick in NavBar AngularJs

up vote
0
down vote

favorite

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>

asked Nov 8 at 3:29

HawkEye

414

have you imported the "angular.js" <script src=""> ?
– niXful-Autistic
Nov 8 at 3:41

Yes I added it but it still didnt work
– HawkEye
Nov 8 at 4:11

NinjaJami 's answer is correct, I have tried and tested it
– niXful-Autistic
Nov 8 at 4:41

add a comment |

up vote
0
down vote

favorite

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>

asked Nov 8 at 3:29

HawkEye

414

have you imported the "angular.js" <script src=""> ?
– niXful-Autistic
Nov 8 at 3:41

Yes I added it but it still didnt work
– HawkEye
Nov 8 at 4:11

NinjaJami 's answer is correct, I have tried and tested it
– niXful-Autistic
Nov 8 at 4:41

add a comment |

up vote
0
down vote

favorite

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>

asked Nov 8 at 3:29

HawkEye

414

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>

javascript angularjs

asked Nov 8 at 3:29

HawkEye

414

asked Nov 8 at 3:29

HawkEye

414

asked Nov 8 at 3:29

HawkEye

414

asked Nov 8 at 3:29

HawkEye

414

asked Nov 8 at 3:29

HawkEye

414

have you imported the "angular.js" <script src=""> ?
– niXful-Autistic
Nov 8 at 3:41

Yes I added it but it still didnt work
– HawkEye
Nov 8 at 4:11

NinjaJami 's answer is correct, I have tried and tested it
– niXful-Autistic
Nov 8 at 4:41

add a comment |

have you imported the "angular.js" <script src=""> ?
– niXful-Autistic
Nov 8 at 3:41

Yes I added it but it still didnt work
– HawkEye
Nov 8 at 4:11

NinjaJami 's answer is correct, I have tried and tested it
– niXful-Autistic
Nov 8 at 4:41

have you imported the "angular.js" <script src=""> ?
– niXful-Autistic
Nov 8 at 3:41

Yes I added it but it still didnt work
– HawkEye
Nov 8 at 4:11

NinjaJami 's answer is correct, I have tried and tested it
– niXful-Autistic
Nov 8 at 4:41

add a comment |

2 Answers
2

active

oldest

votes

up vote
1
down vote

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

<body ng-app="myApp">



    <div  ng-controller="myCtrl">

edited Nov 8 at 4:31

answered Nov 8 at 4:25

Code-EZ

3,21082952

Its still visible when i boot up the webpage
– HawkEye
Nov 8 at 6:41

@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??
– Code-EZ
Nov 8 at 13:21

add a comment |

up vote
0
down vote

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>

answered Nov 8 at 8:01

Immanuel Kirubaharan

1,015715

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53201155%2fshow-form-onclick-in-navbar-angularjs%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
1
down vote

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

<body ng-app="myApp">



    <div  ng-controller="myCtrl">

edited Nov 8 at 4:31

answered Nov 8 at 4:25

Code-EZ

3,21082952

Its still visible when i boot up the webpage
– HawkEye
Nov 8 at 6:41

@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??
– Code-EZ
Nov 8 at 13:21

add a comment |

up vote
1
down vote

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

<body ng-app="myApp">



    <div  ng-controller="myCtrl">

edited Nov 8 at 4:31

answered Nov 8 at 4:25

Code-EZ

3,21082952

Its still visible when i boot up the webpage
– HawkEye
Nov 8 at 6:41

@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??
– Code-EZ
Nov 8 at 13:21

add a comment |

up vote
1
down vote

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

<body ng-app="myApp">



    <div  ng-controller="myCtrl">

edited Nov 8 at 4:31

answered Nov 8 at 4:25

Code-EZ

3,21082952

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

<body ng-app="myApp">



    <div  ng-controller="myCtrl">

edited Nov 8 at 4:31

answered Nov 8 at 4:25

Code-EZ

3,21082952

edited Nov 8 at 4:31

answered Nov 8 at 4:25

Code-EZ

3,21082952

answered Nov 8 at 4:25

Code-EZ

3,21082952

answered Nov 8 at 4:25

Code-EZ

3,21082952

Its still visible when i boot up the webpage
– HawkEye
Nov 8 at 6:41

@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??
– Code-EZ
Nov 8 at 13:21

add a comment |

Its still visible when i boot up the webpage
– HawkEye
Nov 8 at 6:41

@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??
– Code-EZ
Nov 8 at 13:21

Its still visible when i boot up the webpage
– HawkEye
Nov 8 at 6:41

@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??
– Code-EZ
Nov 8 at 13:21

add a comment |

up vote
0
down vote

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

answered Nov 8 at 8:01

Immanuel Kirubaharan

1,015715

add a comment |

up vote
0
down vote

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

answered Nov 8 at 8:01

Immanuel Kirubaharan

1,015715

add a comment |

up vote
0
down vote

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

answered Nov 8 at 8:01

Immanuel Kirubaharan

1,015715

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

answered Nov 8 at 8:01

Immanuel Kirubaharan

1,015715

answered Nov 8 at 8:01

Immanuel Kirubaharan

1,015715

answered Nov 8 at 8:01

Immanuel Kirubaharan

1,015715

answered Nov 8 at 8:01

Immanuel Kirubaharan

1,015715

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk