<!DOCTYPE html>
<html>
<head>
<!-- Angulars Material CSS using RawGit to load directly from `bower-material/master` -->
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/v0.9.0-rc2/angular-material.css">
<!--<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.css">-->
</head>
<body ng-app="app" ng-controller="PeopleCtrl as ctrl" layout-padding>
<h1>Angular Material form example</h1>
<md-content>
<form name="form{{$index}}"
ng-repeat="person in ctrl.people"
layout="row">
<md-input-container md-no-float flex>
<input ng-model="person.firstName"
placeholder="First name"
required>
</md-input-container>
<md-input-container md-no-float flex>
<input ng-model="person.lastName"
placeholder="Last name"
required>
</md-input-container>
<md-input-container flex>
<label>Email</label>
<input ng-model="person.email"
required>
</md-input-container>
<md-input-container flex>
<label>Birthdate</label>
<input type="date"
ng-model="person.birthdate"
required>
</md-input-container>
<!-- Bad rendering: ~1px higher than the other fields? -->
<md-input-container style="/*width: 40px*/">
<!--
Bad rendering: mess with the value
<label>Age</label>
-->
<input type="number"
ng-value="person.age()"
disabled>
</md-input-container>
<!--
Bad rendering: ~1px higher than the other fields
-->
<md-input-container>
<md-select name="gender"
ng-model="person.gender"
placeholder="Gender"
flex
required>
<md-option ng-value="gender" ng-repeat="gender in ctrl.GenderList">
{{gender}}
</md-option>
</md-select>
<!--
The md-select itself is not always red when it should
ng-if="form{{$index}}.$dirty" from https://material.angularjs.org/#/demo/material.components.select does not work here
No need to specify class="errors" like suggested
-->
<div ng-messages="form{{$index}}.gender.$error">
<div ng-message="required">Required</div>
</div>
</md-input-container>
<!-- Bad rendering: height should be forced to 100%? -->
<md-button type="button"
ng-click="person.gender = undefined"
class="md-raised">
Clear gender
</md-button>
<!--
Bad rendering: ~5px higher than the other fields
Break everything if layout="column"
-->
<div layout="row" flex>
<md-checkbox ng-value="drink" ng-repeat="drink in ctrl.DrinkList">
{{drink}}
</md-checkbox>
</div>
<!-- Bad rendering: height should be forced to 100%? -->
<md-button type="button"
ng-click="ctrl.remove(person)"
class="md-raised">
Remove
</md-button>
</form>
<md-button ng-click="ctrl.addAnotherPerson()"
class="md-raised">
Add another person
</md-button>
</md-content>
<!-- AngularJS -->
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-animate.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-aria.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-messages.js"></script>
<!-- Angular Material JavaScript using RawGit to load directly from `bower-material/master` -->
<script src="https://rawgit.com/angular/bower-material/v0.9.0-rc2/angular-material.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>-->
<script>
var app = angular.module('app', ['ngMessages', 'ngMaterial']);
var Gender = {
MALE: 'Male',
FEMALE: 'Female',
OTHER: 'Other'
}
var Drink = {
COFFEE: 'Coffee',
TEA: 'Tea',
WATER: 'Water',
WINE: 'Wine',
OTHER: 'Other'
}
function Person(firstName, lastName, email, birthdate, gender) {
var self = this;
self.firstName = firstName;
self.lastName = lastName;
self.email = email;
self.birthdate = birthdate;
self.gender = gender;
self.age = function() {
var age = undefined;
if (self.birthdate !== undefined) {
var today = new Date();
age = today.getFullYear() - self.birthdate.getFullYear();
var month = today.getMonth() - self.birthdate.getMonth();
if (month < 0 || (month === 0 && today.getDate() < self.birthdate.getDate())) {
age--;
}
}
return age;
};
}
function PeopleCtrl() {
var self = this;
self.people = [
new Person('Adam', 'Yoo', 'adam@email.com', new Date(2005, 0, 1), Gender.MALE),
new Person('Amalie', 'Payne', 'amalie@email.com', new Date(2003, 0, 1), Gender.FEMALE),
new Person('Wladimir', 'Kennedy', 'wladimir@email.com', new Date(1985, 0, 1), Gender.MALE),
new Person('Samantha', 'McKie', 'samantha@email.com', new Date(1982, 0, 1), Gender.FEMALE),
new Person('EstefanÃa', 'Cox', 'estefanÃa@email.com', new Date(1992, 0, 1), Gender.FEMALE),
new Person('Natasha', 'Majory', 'natasha@email.com', new Date(1960, 0, 1), Gender.OTHER),
new Person('Nicole', 'Landry', 'nicole@email.com', new Date(1970, 0, 1), Gender.FEMALE),
new Person('Adrian', 'Austin', 'adrian@email.com', new Date(1995, 0, 1), Gender.MALE),
new Person('Jo', 'Blaise', 'jo@email.com', new Date(1982, 0, 1), Gender.MALE)
];
self.GenderList = Gender;
self.DrinkList = Drink;
self.addAnotherPerson = function() {
self.people.push(new Person('', '', undefined, undefined));
};
self.remove = function(person) {
var i = self.people.indexOf(person);
self.people.splice(i, 1);
};
self.changeEmails = function() {
self.people[0].email = 'adam05@email.com';
self.people[1].email = 'amalie03@email.com';
};
}
app.controller('PeopleCtrl', PeopleCtrl);
</script>
</body>
</html>