AngularJS : Show and hide class on ng-click

Question

I am working on a website in AngularJS. I have a form which is set to "display:none" on purpose.

I have a button which says create. What i want is that when i click on the create button the form set to "display:none" should change to "display:block" and the create button should hide.

Also after submitting the form , the form should hide and the create button should be visible again.

PS: Now i understand that there are a couple of ways to do this, like i could use the ng-show or ng-hide directive. OR i could use ng-click directive. I want to know what is the best programming practice in this case when developing a serious and professional web application.

Its a simple thing so if you could please provide the code that would be great.

Answer 1

Simply use the ngClick directive with the ngShow directive see below for a working example:

 var myApp = angular.module('myApp', []); myApp.controller('FormController', ['$scope', function($scope) { // init showForm to false; $scope.showForm = false; // init empty user object for our form $scope.user = {}; $scope.submitForm = function() { // logic when the form is submitted //... // reset the user $scope.user = {}; // finally hide the form $scope.showForm = false; }; } ]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="FormController"> <button ng-hide="showForm" ng-click="showForm = true">Show form</button> <form ng-show="showForm" ng-submit="submitForm()"> <input type="text" name="firstname" ng-model="user.firstname" /> <input type="submit" value="submit" /> </form> </div> </div> 

We are setting the form to show if showForm is true.

This variable is toggled using the ngClick directive on the button element and is also explicitly set to false in the controller within the submitForm function.

We use the ngSubmit directive to bind submitForm() to the onsubmit event. When the form is submitted, you run your logic and then the form is reset and hidden.

Answer 2

I'd use ng-click along with ng-show.

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app> <div class="hideShow" ng-show="showToggle"> <form ng-submit="showToggle = false"></form> fghfgh </div> <button ng-hide="showToggle" ng-click="showToggle = !showToggle">Click To Show</button> </div> 

That will start hidden, and show when you click the button.

Answer 3

Initially show Click To Show button and when click on this button then will show your content and show another button Click To hide button so also need to use ng-show for both buttons.

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app> <div class="hideShow" ng-show="isShow"> <p>here your form or other content <p> </div> <button ng-click="isShow= !isShow" ng-show="!isShow">Click To Show</button> <button ng-click="isShow= !isShow" ng-show="isShow">Click To hide</button> </div>