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.

P.S: 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.

cnorthfield · Answer 1 · 2016-04-24T09:42:11.560

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.

@papakia....thanks for the code. Just one more thing...i don't want to display the hide button. It should just show the form with the submit button and when we submit it, then it should display the show button again. — Steve Jax, Apr 24 '16 at 08:03
@SteveJax no problem :) if this or any answer has solved your question please consider accepting it by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. — cnorthfield, Apr 24 '16 at 10:32

score 2 · Answer 2 · edited Mar 22 '18 at 22:51

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.

edited Mar 22 '18 at 22:51

Ruslan López

4,433
2
26
37

answered Apr 24 '16 at 07:35

Michael Westcott

482
3
6

I sort of get what you mean. If you want to hide the button after it's clicked, you can add ng-hide="showToggle" to the button. Then on submitting the form, set showToggle back to false. showToggle is just a variable attached to $scope. You could use multiple variables to hide and show different things. – Michael Westcott Apr 24 '16 at 08:17
Thanks Michael....this works perfectly ! I understand the value of "showToggle" will change when clicked on the button "Click to show" but how the value of showToggle is being set to false in the beginning by default. – Steve Jax Apr 24 '16 at 08:21
It's set to undefined which is a falsey value in JS. This answer explains it: http://stackoverflow.com/questions/19839952/all-falsey-values-in-javascript – Michael Westcott Apr 24 '16 at 08:23

score 1 · Answer 3 · edited Mar 22 '18 at 22:53

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>

AngularJS : Show and hide class on ng-click

3 Answers3