Last active
July 9, 2016 12:42
-
-
Save 2947721120/f45608c2c33e7670fc32b23bcfee8325 to your computer and use it in GitHub Desktop.
AngularJS with Firebase Demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> | |
<script src="https://code.angularjs.org/1.2.6/angular.min.js"></script> | |
<script src="https://cdn.firebase.com/v0/firebase.js"></script> | |
<script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script> | |
<body ng-controller="DemoCtrl" class="container" ng-app="DemoApp"> | |
<h2>用AngularJS和火力点实时通讯名单</h2> | |
<h3>消息计数: {{getCount()}} 项目</h3> | |
<!--ADD ITEM FORM--> | |
<form name="myForm"> | |
<div> | |
<input type="text" | |
name="todoNameField" | |
ng-model="todoName" | |
placeholder="Add new message (min 3 chars)" | |
required ng-minlength="3" | |
class="form-control" | |
ng-keyup="($event.keyCode == 13 && todoName.length > 2) ? addItem() : return" | |
style="margin-bottom: 10px" | |
/> | |
<button ng-click="addItem()" | |
ng-hide="myForm.todoNameField.$invalid" | |
class="btn btn-primary" type="button" | |
>保存计划</button> | |
</div> | |
</form> | |
<hr> | |
<!--TODO LIST--> | |
<div ng-repeat="item in todos" class=" list-group-item row"> | |
<div class="col-md-6"> | |
<!--COMPLETED ICON--> | |
<span class="glyphicon glyphicon-thumbs-up" | |
ng-show="item.completed"> </span> | |
<!--todo label--> | |
<span>{{item.name}} </span> | |
<span class="text-info"> [ {{item.id}} ]</span> | |
</div> | |
<div class="col-md-6"> | |
<!--Delete Todo button--> | |
<a class="btn btn-primary" ng-click="removeItem($index, item, $event)"> | |
删除 | |
</a> | |
<a class="btn btn-info" ng-click="changeStatus(item)"> | |
改变现状 | |
</a> | |
</div> | |
</div> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var myApp = angular.module('DemoApp', ['firebase']); | |
myApp.constant("FIREBASE_URL", "https://demotodo.firebaseio.com/" ); | |
myApp.controller('DemoCtrl', ['$scope','$firebase','FIREBASE_URL',function($scope, $firebase, FIREBASE_URL) { | |
// Get Stored TODOs | |
var todosRef = new Firebase(FIREBASE_URL); | |
$scope.todos = $firebase(todosRef); | |
$scope.test = "Test works!"; | |
$scope.getCount = function () { | |
var count = 0; | |
todosRef.once('value', function(dataSnapshot) { | |
count = dataSnapshot.numChildren(); | |
}); | |
return count; | |
} | |
// Update the "completed" status | |
$scope.changeStatus = function (item) { | |
// Get the Firebase reference of the item | |
var itemRef = new Firebase(FIREBASE_URL + item.id); | |
//火力点:更新项目 | |
$firebase(itemRef).$set({ | |
id: item.id, | |
name : item.name, | |
completed: !item.completed | |
}); | |
} | |
//删除待办事项删除待办事项删除待办事项删除待办事项删除待办事项删除待办事项删除待办事项删除待办事项 | |
$scope.removeItem = function (index, item, event) { | |
//避免错误的去除 | |
if (item.id == undefined)return; | |
//火力点:从列表中删除项目 | |
$scope.todos.$remove(item.id); | |
} | |
//添加新的待办事项 | |
$scope.addItem = function () { | |
// 创建一个唯一的 | |
var timestamp = new Date().valueOf() | |
//把firebase参考of the item | |
var itemRef = new Firebase(FIREBASE_URL + timestamp); | |
$firebase(itemRef).$set({ | |
id: timestamp, | |
name : $scope.todoName, | |
completed: false | |
}); | |
$scope.todoName = ""; | |
} | |
}]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.chart { | |
background: #eee; | |
padding: 3px; | |
} | |
.chart div { | |
width: 0; | |
transition: all 1s ease-out; | |
-moz-transition: all 1s ease-out; | |
-webkit-transition: all 1s ease-out; | |
} | |
.chart div { | |
font: 10px sans-serif; | |
background-color: steelblue; | |
text-align: right; | |
padding: 3px; | |
margin: 5px; | |
color: white; | |
box-shadow: 2px 2px 2px #666; | |
} |
Author
2947721120
commented
Jul 9, 2016
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment