Skip to content

Instantly share code, notes, and snippets.

@2947721120

2947721120/Dance.markdown

Last active June 29, 2016 17:45
Show Gist options
  • Save 2947721120/0bde0e45303cda7610dd8a19dc85d505 to your computer and use it in GitHub Desktop.
Save 2947721120/0bde0e45303cda7610dd8a19dc85d505 to your computer and use it in GitHub Desktop.
Download ZIP
Dance
Raw
index.html
<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>
Raw
script.js
var app = angular.module("sampleApp", ["firebase", "ngMaterial", "ngMdIcons"]);
app.controller("PersonCtrl", function($scope, $firebaseArray, $log, $mdToast) {
$scope.loading = false;
var ref = new Firebase("https://popping-fire-8175.firebaseio.com/persons");
// 创建一个同步数组
$scope.persons = $firebaseArray(ref);
//新项目添加到数组
//这个人被自动添加到我们的数据库火力地堡！
$scope.addPerson = function() {
$scope.loading = true;
//加人数据库
$scope.persons.$add({
name: $scope.newPersonName,
club: $scope.newPersonClub
});
//完成后显示敬酒
$mdToast.show(
$mdToast.simple()
.textContent("Added " + $scope.newPersonName + " from " + $scope.newPersonClub)
.position("top right")
.hideDelay(3000)
);
//清晰的形式下一次
$scope.addPersonForm.$setPristine();
$scope.newPersonName = "";
$scope.newPersonClub = "";
$scope.loading = false;
};
$scope.removePerson = function(personObject) {
$scope.persons.$remove(personObject)
};
});
app.controller('dateCtrl', ['$scope', function($scope) {
$scope.date = new Date();
}]);
app.config(function($mdThemingProvider) {
$mdThemingProvider
.theme('default')
.primaryPalette('pink')
.accentPalette('lime')
.warnPalette('red')
.backgroundPalette('grey');
});
Raw
style.css
body {
width:100%;
padding:0;
margin:0;
box-sizing: border-box;
}
md-content.md-default-theme, md-content {
background-color: rgba(163, 160, 160, 0.45);
}
.carddemoBasicUsage .card-media {
background-color: #999999; }
md-card > h2 {
padding-left : 15px;
}
.note {
width: 100%;
box-sizing:border-box;
}
p.good {
line-height: 30px;
padding-left: 10px;
margin: 10px;
box-sizing:border-box;
background-color: rgba(0, 128, 0, 0.31);
}
p.warn {
line-height: 30px;
padding-left: 10px;
margin: 10px;
box-sizing:border-box;
background-color: rgba(204, 2, 5, 0.31);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment