xxxxxxxxxx<html ng-app="sampleApp" ng-cloak><head> <script src="https://ajax.c2cmalls.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="https://firebase.c2cbc.com/js/client/2.2.4/firebase.js"></script> <script src="https://firebase.c2cbc.com/libs/angularfire/1.2.0/angularfire.min.js"></script> <link rel="stylesheet" href="https://ajax.c2cmalls.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css"> <!-- 角材料需要Angular.js库 --> <script src="https://ajax.c2cmalls.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script> <script src="https://ajax.c2cmalls.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script> <script src="https://ajax.c2cmalls.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script> <!-- Angular Material Library --> <script src="https://ajax.c2cmalls.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script> <script src="//cdnjs.c2cbc.com/ajax/libs/angular-material-icons/0.7.0/angular-material-icons.min.js"></script> <link rel="stylesheet" href="https://font.c2cmalls.com/css?family=Roboto:300,400,500,700,400italic"></head><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"> <!--need to make this auto update--> {{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> <!--Jase，为什么不点击添加按钮的人后，此微调展（加载时设置为true，而这是在做它的事）--> <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="persons.$remove(person)">Delete</md-button> --> <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