Basic angularFire options: $save, $add and $remove.

The way connect firebase:

var app = angular.module('app', ['firebase']);
    var ref = new Firebase(FIREBASE_URI);
//create an item storage
var items = $firebase(ref);

Example:

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title>Angular Firebase</title>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/> </head>
<body ng-controller="MainCtrl">
<table class="table edit">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Count</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(id, item) in items">
<td><input type="text" ng-model="item.name" ng-blur="updateItem(id)"/></td>
<td><input type="text" ng-model="item.description" ng-blur="updateItem(id)"/></td>
<td><input type="text" ng-model="item.count" ng-blur="updateItem(id)"/></td>
<td>
<a href="#" ng-click="removeItem(id)" class="navbar-link">Remove</a>
</td>
</tr>
</tbody>
</table> <div class="well">
<h4>Add Item</h4> <form class="form-inline" role="form" novalidate ng-submit="addItem()">
<div class="form-group">
<input type="text" class="form-control" ng-model="newItem.name" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control" ng-model="newItem.description" placeholder="Description">
</div>
<div class="form-group">
<input type="text" class="form-control" ng-model="newItem.count" placeholder="Count">
</div>
<button type="submit" class="btn btn-default">Add</button>
</form>
</div> <script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.6.0/angularfire.js"></script>
<script src="public/js/app.js"></script>
</body>
</html>
/**
* Created by Answer1215 on 11/9/2014.
*/ var app = angular.module('app', ['firebase']); app.constant('FIREBASE_URI', 'https://<your_app>.firebaseio.com/'); app.controller('MainCtrl', ['$scope', 'ItemsService', function ($scope, ItemsService) {
$scope.newItem = { name: '', description: '', count: 0 };
$scope.currentItem = null; $scope.items = ItemsService.getItems(); $scope.addItem = function () {
ItemsService.addItem(angular.copy($scope.newItem));
$scope.newItem = { name: '', description: '', count: 0 };
}; $scope.updateItem = function (id) {
ItemsService.updateItem(id);
}; $scope.removeItem = function (id) {
ItemsService.removeItem(id);
};
}]); app.factory('ItemsService', ['$firebase', 'FIREBASE_URI', function ($firebase, FIREBASE_URI) {
var ref = new Firebase(FIREBASE_URI);
var items = $firebase(ref); var getItems = function () {
return items;
}; var addItem = function (item) {
items.$add(item);
}; var updateItem = function (id) {
items.$save(id);
}; var removeItem = function (id) {
items.$remove(id);
}; return {
getItems: getItems,
addItem: addItem,
updateItem: updateItem,
removeItem: removeItem
}
}]);

Also take a look the Forge, The easy way you can go to your app's forage is copy paste the FIREBASE_URI into boswer.

In Forge, you can modify, remove or add the data. Also you can import JSON format data into the Forage, all those things happen in real time.

[Firebase] 1. AngularFire, $save, $add and $remove, Forge的更多相关文章

  1. eclipse tomcat add and remove工程异常

    1  eclipse导入工程后,右击server add and remove工程时,there are no resource: 解决方案:右击工程->单击property->选择pro ...

  2. eclipse中tomcat使用add and remove无法发布web项目

    继上次启动eclipse中的tomcat报classNotFound的问题后,这次又遇到新问题.就是右键点击tomcat使用add and remove发布web项目至tomcat后,启动tomcat ...

  3. [置顶] 有关ListIterator接口的add与remove方法探究

    ListIterator接口继承自Iterator接口,新增了add()等方法. 关于ListIterator的add()方法的作用(接口是没有方法实现的,但其实现类对于add()方法的实现机制大致相 ...

  4. Arrays.asList 为什么不能 add 或者 remove 而 ArrayList 可以

    分析如下例子: 1 import java.util.Arrays; 2 import java.util.List; 3 4 5 public class Test { 6 public stati ...

  5. eclipse中tomcat的add and Remove找不到项目

    在我们运行项目前,都需要将项目部署到tomcat上,但是有时我们会遇到这种情况:项目明明存在,但是eclipse中tomcat的add and remove找不到项目,无法部署,那么这个问题该如何解决 ...

  6. 数组转换为List(Arrays.asList)后add或remove出现UnsupportedOperationException

    Java中,可以使用Arrays.asList(T... a)方法来把一个数组转换为List,返回一个受指定数组支持的固定大小(注意是固定大小)的列表.此方法同 Collection.toArray( ...

  7. 【java】在分页查询结果中对最后的结果集List进行操作add()或remove()操作,报错:java.lang.UnsupportedOperationException

    场景: 在分页查询结果中对最后的结果集List进行操作add()或remove()操作,报错:java.lang.UnsupportedOperationException 错误: java.lang ...

  8. Arrays.asList()后调用add,remove这些method时出现java.lang.UnsupportedOperationException异常

    String[] queryNames = request.getParameterValues("queryName"); List<String> queryNam ...

  9. 为什么Java里的Arrays.asList不能用add和remove方法?

    在平时的开发过程中,我们知道能够将一个Array的对象转化为List.这种操作,我们仅仅要採用Arrays.asList这种方法即可了.笔者前段时间一直用这种方法,有一天,我发现通过Arrays.as ...

随机推荐

  1. crontab定时运行python脚本访问MySQL遇到问题

    最近写了一个python脚本来定时备份MySQL数据库.具体实现如下: 1)python脚本中使用os.system("mysqldump -h127.0.0.1 -uroot -ppass ...

  2. Vue.js 系列教程 3:Vue

    原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...

  3. Google的代码高亮-code-prettify

    前不久发现,在wordpress中贴代码的时候,发现code标签并没有意料中的好使用,在贴代码的时候没有高亮真的是一件无法忍受的事情. 正巧,两周前听过同事Eason的一个关于Markdown的分享, ...

  4. JavaScript初步

    隐式转换 其他类型转换成布尔类型: undefined --> false null --> false 0或者0.0或者NaN --> false 字符串长度为0 --> f ...

  5. Hibernate 条件-分页查询

    这里我们继续跟着上一次的节奏继续学习Hibernate的查询. 1.条件查询一(占位符) 按照占位符的方式进行条件查询,这里query有一个setInteger(arg1, arg2)方法,其中第一个 ...

  6. 51nod1805 小树 prufer序列 + 容斥原理

    首先考虑$prufer$序列,那么问题转化为求 一个长为$n - 2$的序列,总共有$n$个元素,恰有$m$个元素不出现在序列中的方案数 考虑容斥,答案即为 至少$m$个元素不出现 - 至少$m + ...

  7. [NOI2007]货币兑换 --- DP + 斜率优化(CDQ分治)

    [NOI2007]货币兑换 题目描述: 小 Y 最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A 纪念券(以下简称 A 券)和 B 纪念券(以下简称 B 券). 每个持有金券的顾客都有一个 ...

  8. Problem G: 切煎饼

    Description 王小二自夸刀工不错,有人放一张大的圆煎饼在砧板上,问他:饼不允许离开砧板,切100刀最多能切多少块? Input 多组测试数据,每组输入1个整数,代表切的刀数 Output 每 ...

  9. bzoj 1626: [Usaco2007 Dec]Building Roads 修建道路 -- 最小生成树

    1626: [Usaco2007 Dec]Building Roads 修建道路 Time Limit: 5 Sec  Memory Limit: 64 MB Description Farmer J ...

  10. HDU 5671 Matrix 水题

    Matrix 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5671 Description There is a matrix M that has ...