Angular Material Design

by Yolanda Robles

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0/angular-material.js"></script>
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0/angular-material.css">
<div layout="column" class="md-inline-form " ng-app="app">

  <md-tabs md-dynamic-height md-border-bottom md-selected="2">
    <div ng-controller="CamperBasicInfoCtrl">


      <md-tab label="Basic Information">
        <md-content layout-padding>
          <fieldset>
            <legend>Camper Information</legend>

            <div layout layout-sm="row">
              <md-input-container flex>
                <label>First Name</label>
                <input type="text">
              </md-input-container>
              <md-input-container flex>
                <label>Last Name</label>
                <input type="text">
              </md-input-container>
              <md-input-container flex>
                <label>Nickname</label>
                <input type="text">
              </md-input-container>
            </div>
            <div>
              <md-input-container class="md-block">
                <label>Address</label>
                <input type="text">
              </md-input-container>
            </div>
            <div layout layout-sm="row">
              <md-input-container class="md-block" flex>
                <label>City</label>
                <input...

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic);

JavaScript

var app = angular.module('app', ['ngMaterial', 'material.svgAssetsCache'])
  .controller('CamperBasicInfoCtrl', function($scope) {
    $scope.user = {
      firstName: '',
      lastName: '',
      address: '',
      city: '',
      state: '',
      gender: '',
      postalCode: ''
    };

    $scope.states = ('AL AK AZ AR CA CO CT DE FL GA HI ID IL IN IA KS KY LA ME MD MA MI MN MS ' +
      'MO MT NE NV NH NJ NM NY NC ND OH OK OR PA RI SC SD TN TX UT VT VA WA WV WI ' +
      'WY').split(' ').map(function(state) {
      return {
        abbrev: state
      };
    });

    $scope.genders = ['Male', 'Female'];
  })

.controller('MedicalInfoCtrl', function($scope) {
    $scope.emerContact1 = {
      firstName: '',
      lastName: '',
      address: '',
      city: '',
      state: '',
      gender: '',
      postalCode: ''
    };

    $scope.emerContact2 = {
      firstName: '',
      lastName: '',
      address: '',
      city: '',
      state: '',
      gender: '',
      postalCode: ''
    };

  })
  .controller('CamperRegistrationCtrl', function($scope) {

    $scope.RegistrationInfo = {
      ProgramValue: '',
      ProgramWeeks: '',
      ProgramDays: '',
      Transportation: '',
      ExtendedDay: '',
      CateredLunchChosen: '', 
      CampShirtSizes: []
    };

		$scope.ShirtSizeChosen = function(selected){
    	
      alert('selected');
      
    
    };

    $scope.ChosenProgramWeeks = '';

    $scope.ChosenProgramDays = [{
      daysVal: 3,
      daysLabel: '3 Days'
    }, {
      daysVal: 5,
      daysLabel: '5 Days'
    }, ];


    $scope.Programs = [{
      programName: 'Pioneers Program (Preschool)',
      programId: 1
    }, {
      programName: 'Junior Camp (Kindergarten)',
      programId: 2
    }, {
      programName: 'Junior Camp (1st-2nd grade)',
      programId: 3
    }, {
      programName: 'Senior Camp (3rd-6th grade)',
      programId: 4
    }, {
      programName: 'Future Leaders (7th-9th grade)',
      programId: 5
   ...