<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="myApp" ng-controller='ctrl'>
<form class="userForm" name="userForm" novalidate ng-submit="this[sendFunction]()">
<h1 class="login">Login or Register</h1>
<md-input-container>
<label>Username</label>
<input id="usernameId" ng-model="username" type="text" name="username" ng-focus="usernameFocus()" required md-autofocus>
<div ng-messages="userForm.username.$error" ng-if="userForm.username.$touched">
<div ng-message="required">Your name?</div>
</div>
</md-input-container>
<md-input-container ng-if="register">
<label>E-Mail</label>
<input ng-model="email" type="email" name="email" required ng-minlength="10"
ng-maxlength="50" md-autofocus>
<div ng-messages="userForm.email.$error" ng-if="userForm.email.$touched">
<div ng-message="required">Your mail?</div>
</div>
</md-input-container>
<md-input-container>
<label>Password</label>
<input ng-model="password" type="password" name="passwordName" required />
<div ng-messages="userForm.passwordName.$error" ng-if="userForm.passwordName.$touched">
<div ng-message="required">Your Pw?</div>
</div>
</md-input-container>
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<md-button style="margin: auto;" class="md-raised md-primary" type="submit">{{type}}</md-button>
</section>
</form>
<br /><br />
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<md-button ng-click="showRegister()" class="md-raised md-warn">Or Register</md-button>
</section>
<br />
<span>Send Data Login: {{data}}</span><br />
<span>Send Data Register: {{dataRegister}}</span>
<br /><br /><br /><br />
Problem: <br />
Type username and password and click login. <br />
Then click to register and a new input field email will loading.<br />
Type any email and click register <br />
--> Where is the email field in register-data after submit?
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/snapshot/angular-messages.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
<script src="app.js"></script>
</body>
</html>
// Code goes here
var app=angular.module('myApp',['ngMaterial', 'ngMessages'])
.controller('ctrl',function($scope){
$scope.register = false;
$scope.sendFunction = 'sendPostLogin';
$scope.type = "Login";
$scope.showRegister = function(){
$scope.register = true;
$scope.sendFunction = 'sendPostRegister';
$scope.type = "Register";
}
$scope.sendPostLogin = function () {
console.log("SendPostLogin");
var data = JSON.stringify({
username: $scope.username,
password: $scope.password
});
$scope.data = data;
}
$scope.sendPostRegister = function () {
console.log("SendPostRegister");
var data = JSON.stringify({
username: $scope.username,
email: $scope.email,
password: $scope.password
});
$scope.dataRegister = data;
}
});
/* Styles go here */