JSFiddle - React, Tailwind, and code Playground

angular - toggle with text changes to button ng-class

by Andrew Pougher

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>
<div ng-app="MyCtrl" ng-controller="thingy" class="container">
  <button ng-click="showDiv = !showDiv" class="btn btn-lg btn default">
    {{showDiv ? 'Sign Up Today':'Login Form' }}</button>
  <h4 ng-class="{'hide': showDiv}" class="lead">
    LOG IN
  </h4>
  <h4 ng-class="{'hide': !showDiv}" class="lead">
    SIGN UP
  </h4>

  <form name="form" role="form" class="form form-inline">
    <div ng-switch on="showDiv">
      <div ng-switch-when="false" class="centered-form animated fadeInLeft panel panel-default panel-body col-xs-12 col-sm-8 col-md-4 col-sm-offset-2 col-md-offset-4 shadow">
        <h4>Sign In</h4>
        <label>User name</label>
        <input type="text" ng-model="username">
        <label>Password</label>
        <input type="password" ng-model="password">
        <br>
        <button class="btn btn-success" ng-click="">Submit</button>
      </div>
      <div ng-switch-when="true">
        <label>Sign Up</label>
        <!-- sign up -->

        <div class="row centered-form animated fadeInRight">
          <div class="col-xs-12 col-sm-8 col-md-4 col-sm-offset-2 col-md-offset-4">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title">Please sign up for BrandOral <small>It's free!</small></h3>
              </div>
              <div class="panel-body">
                <form role="form">
                  <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-6">
                      <div class="form-group" ng-class="{ 'has-error': form.firstName.$dirty &&...

CSS

* {
  border-radius: 0 !important;
}

body {
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));
  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
  /* Firefox 3.6+ */
  background: -moz-radial-gradient(circle, #1a82f7, #2F2727);
  /* IE 10 */
  background: -ms-radial-gradient(circle, #1a82f7, #2F2727);
  height: 600px;
  color: white
}

.panel {
  color: black;
}

.centered-form .panel,
.shadow {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: rgba(0, 0, 0, 0.3) 20px 20px 20px;
}

.checkbox {
  padding-left: 20px;
}

.checkbox label {
  display: inline-block;
  position: relative;
  padding-left: 5px;
}

.checkbox label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 24px;
  height: 24px;
  left: 0;
  margin-left: -20px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}

.checkbox label::after {
  display: inline-block;
  position: absolute;
  width: 24px;
  height: 24px;
  left: 0;
  top: 0;
  margin-left: -21px;
  margin-top: -2px;
  padding-left: 3px;
  font-size: 20px;
  color: #555555;
}

.checkbox input[type="checkbox"] {
  opacity: 0;
}

.checkbox input[type="checkbox"]:focus + label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.checkbox input[type="checkbox"]:checked + label::after {
  font-family: 'FontAwesome';
  content: "\f00c";
}

.checkbox input[type="checkbox"]:disabled + label {
  opacity: 0.65;
}

.checkbox input[type="checkbox"]:disabled + label::before {
  background-color: #eeeeee;
  cursor: not-allowed;
}

.checkbox.checkbox-circle label::before {
  border-radius:...

JavaScript

var myApp = angular.module('myApp', ['ngSanitize']);

myApp.controller('thingy', function($scope) {
  'use strict';
  //$scope.showDiv = true;

})





 	/* http://bit.ly/ARP71 */
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-4809804-1', 'auto');
  ga('send', 'pageview');