Dance

<body ng-controller="PersonCtrl">
  <md-content>
    <md-toolbar class="md-hue-2">
      <div class="md-toolbar-tools">
        <div>
          <md-button ng-click="toggleRight()" class="md-icon-button" aria-label="settings">
            <ng-md-icon icon="menu" style="fill: whitesmoke"></ng-md-icon>
          </md-button>
        </div>
        Dance
        <span flex></span>
        <div ng-controller="dateCtrl">
          
          {{date | date:'dd-MMM-yy hh:mm a'}}
        </div>
      </div>
    </md-toolbar>

<md-content class="md-padding">
      <div layout="column" layout-align="center">
        <md-card flex>
          <md-card-content>
            <div layout="row" layout-align="center center">
              <ng-md-icon icon="search"></ng-md-icon>
              <h2 class="md-headline">Search</h2>
            </div>
            <div flex-offset="15" flex="60" flex>
              <md-input-container class="md-block">
                <label>Performer's Name</label>
                <input ng-model="query" />
              </md-input-container>
            </div>
          </md-card-content>
        </md-card>
      </div>

<div layout="column" layout-gt-xs="row">
        <md-card flex flex-gt-xs="50">
          <md-toolbar class="md-hue-2">
            <h2 class="md-toolbar-tools">
                <span>Database</span>
            </h2>
          </md-toolbar>
          <md-toolbar class="md-theme-light">
            <h2 class="md-toolbar-tools">
                <span>添加新的人</span>
            </h2>
          </md-toolbar>
          <md-card-content>

<form name="addPersonForm" ng-submit="addPerson()">
              <div layout="row" layout-align="start start" flex>
                <md-input-container class="md-block">
                  <label>Name</label>
                  <input ng-model="newPersonName" />
                </md-input-container>
                <md-input-container class="md-block">
                  <label>Club</label>
                  <input ng-model="newPersonClub" />
                </md-input-container>
                <md-button class="md-raised md-primary" type="submit">Add person</md-button>
                
                <md-progress-circular ng-show="loading" class="md-hue-2" md-diameter="24px" md-mode='indeterminate'></md-progress-circular>
                
              </div>
            </form>
          </md-card-content>
          
          <md-toolbar class="md-theme-light">
            <h2 class="md-toolbar-tools">
                <span>Existing people</span>
            </h2>
          </md-toolbar>
          <md-card-content>

<md-list-item ng-repeat="person in persons | filter:query" class="noright">
              <div layout="row" layout-align="start start">
                <md-input-container class="md-block">
                  <label>Name</label>
                  <input ng-model="person.name" ng-change="persons.$save(person)" />
                </md-input-container>

<md-input-container class="md-block">
                  <label>Club</label>
                  <input ng-model="person.club" ng-change="persons.$save(person)" />
                </md-input-container>

<md-button class="md-warn" ng-click="removePerson(person)">Delete</md-button>
              </div>
            </md-list-item>

</md-card-content>

</md-card>

<md-card flex flex-gt-xs="50">
          <md-list-item class="md-2-line" ng-repeat="person in filteredPersons = (persons | filter:query)" class="noright" ng-click="null">
            <img ng-src="https://api.adorable.io/avatars/100/abott@adorable.png" class="md-avatar" />
            <div class="md-list-item-text">
              <h3>{{person.name}}</h3>
              <p>{{person.club}}</p>
            </div>

<md-divider ng-if="!$last"></md-divider>
          </md-list-item>
          <md-toolbar class="md-warn" ng-show="!filteredPersons.length">
            <div class="md-toolbar-tools">
              <h2 class="md-flex">No matches</h2>
            </div>
          </md-toolbar>
          <div ng-show="!filteredPersons.length">有没有表演者名称中包含 "{{query}}"</div>
        </md-card>

</div>
    </md-content>
  </md-content>

</body>

</html>

https://ajax.c2cmalls.com/ajax/libs/angularjs/1.3.15/angular.min.js

https://firebase.c2cbc.com/js/client/2.2.4/firebase.js

https://firebase.c2cbc.com/libs/angularfire/1.2.0/angularfire.min.js

https://ajax.c2cmalls.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js

https://ajax.c2cmalls.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js

https://ajax.c2cmalls.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js

https://ajax.c2cmalls.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js

https://cdnjs.c2cbc.com/ajax/libs/angular-material-icons/0.7.0/angular-material-icons.min.js