I am not sure how easy this can be done, but what I am trying to do is have only a Login/Register button appear to a user. Once a button is clicked, I want it to ignore the actual validation stuff in my js but rather slide out the respective form beneath it, then once again clicked actually submit itself. (one click to show, another click to submit).

Is there a simple way to do this with stuff like ng-hide or ng-class, I want to do it with AngularJS stuff if possible?

PLUNKER DEMO (forms div is set to hidden right now on page login.html)

If this is easy, how would I also make one form close if the other was selected? As in, lets say I clicked Login and that form appeared, then I decided to actually Register (I want Login to slide back up). How can I keep only one form open at a time?

*If you know of any cool input example stuff/references that can be done with AngularJS that would be awesome too, I love the language it is just confusing haha

I am not sure how easy this can be done, but what I am trying to do is have only a Login/Register button appear to a user. Once a button is clicked, I want it to ignore the actual validation stuff in my js but rather slide out the respective form beneath it, then once again clicked actually submit itself. (one click to show, another click to submit).

Is there a simple way to do this with stuff like ng-hide or ng-class, I want to do it with AngularJS stuff if possible?

PLUNKER DEMO (forms div is set to hidden right now on page login.html)

If this is easy, how would I also make one form close if the other was selected? As in, lets say I clicked Login and that form appeared, then I decided to actually Register (I want Login to slide back up). How can I keep only one form open at a time?

*If you know of any cool input example stuff/references that can be done with AngularJS that would be awesome too, I love the language it is just confusing haha

• javascript
• html
• forms
• angularjs

• 2 HAHAHA, that plunker sample :D day made – Rohan Büchner Commented Aug 11, 2014 at 15:11
• Just to clarify so i understand the flow. You want a user, on enter of your application, to only see a login button on some page. When they click on it, they must see a login form. when they click login. they must be logged in. – Rohan Büchner Commented Aug 11, 2014 at 15:16
• @RohanBüchner Glad you enjoyed it! Is what I did acceptable you think? Using the ng-click wuth show/hide? UPDATED DEMO – Austin Commented Aug 11, 2014 at 15:16
• What I want is for only login/register to appear, but when they click one, the respective form will appear. (both buttons still present). And only one form showing at a time. like my updated demo – Austin Commented Aug 11, 2014 at 15:18
• updated link, punker is being slow for me though :/ – Austin Commented Aug 11, 2014 at 15:20

2 Answers 2

Like I've stated in my previous ment. You can hide or show page sections using

• ng-show/ ng-hide -> markup gets hidden
• ng-if -> markup gets removed

To animate this.

Angular has a few built in features. when you use ng-class, if, show, hide. Angular wil add transitional css tags

Controller

$scope.leftColumn = 'col-lg-12';   // will be changed to col-lg-3
$scope.rightColumn = 'hidden';     // will be changed to col-lg-9

Markup

 <div ng-class="leftColumn">
    this is 100% 
  </div>

 <div ng-class="rightColumn" >
    this is hidden @ first
 </div>

CSS

.col-lg-3-add {
    -webkit-transition: 0.8s ease-out all;
    transition: 0.8s ease-out all;
}

.col-lg-3-remove {
    -webkit-transition: 0.5s ease-out all;
    transition: 0.5s ease-out all;
}

.col-lg-9-add-active {
    display: none;
}

.col-lg-9-add {
    -webkit-transition: 0.1s linear all;
    transition: 0.1s linear all;
}

Note I'm using an excerpt of some of the bootstrap classes. col-12 is 100%, and col-3 is 25%...I think.

In my example all I'm doing is changing the value of leftColumn & rightColumn inside my controller, and angular will automagically handle the slide transition.

More info:

https://docs.angularjs/guide/animations

http://www.divshot./blog/tips-and-tricks/angular-1-2-and-animate-css/

Modify it to look something like this:

<form ng-submit="showLogin = showLogin ? login() : true">
  <fieldset>
    <div class="row" id="loginForm" ng-show="showLogin">

Note: showLogin does not need to be initialized with a value since it will be undefined and be evaluated as a falsy value until set to true.