Clean Way To Show/hide Forms With Angularjs Button

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

Solution 1:

Like I've stated in my previous comment. 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">
    thisis100% 
  </div>

 <div ng-class="rightColumn" >
    thisis 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.org/guide/animations

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

Solution 2:

Modify it to look something like this:

<formng-submit="showLogin = showLogin ? login() : true"><fieldset><divclass="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.