我正在使用AngularJS和Firebase填充简单的待办事项应用程序。 （而且我也是AngularJS的新手！）待办事项备注将保存在$scope.todos变量中。这是我的app.js代码：
myApp.controller('mainController', function($scope, $firebase) {
// connect to firebase
var ref = new Firebase("https://XXX.firebaseio.com/todos");
var fb = $firebase(ref);
$scope.todos = [];
// sync as object
var syncObject = fb.$asObject();
// 3-way data binding
syncObject.$bindTo($scope, "todos");
$scope.addNewTodo = function(){
var todoTitle = $(".add-todo").val();
var createdAt = new Date();
var element = {
title: todoTitle,
timestamp: createdAt,
done: false
};
fb.$push(element);
$(".add-todo").val("");
};
});
这是我的index.html代码：
<div class="container" ng-app="todoApp" ng-controller="mainController">
<div class="row">
<div class="col-md-6">
<div class="todolist not-done">
<h1>Todos</h1>
<input type="text" class="form-control add-todo" placeholder="Add todo" ng-enter="addNewTodo()">
<button id="checkAll" class="btn btn-success">Mark all as done</button>
<hr/>
<ul id="sortable" class="list-unstyled" ng-repeat="todo in todos">
<li class="ui-state-default">
<div class="checkbox">
<label>
<input type="checkbox" value=""/> {{ todo.title }}</label>
</div>
</li>
</ul>
<div class="todo-footer">
<strong><span class="count-todos">{{ todos.length }}</span></strong> Items Left
</div>
</div>
</div>
</div>
</div>
我添加{{todos.length}}来计算$scope.todos数组中剩余的待办事项元素。但是，当我在$scope.todos数组中添加或删除元素时，它不会自动更新。这对我来说有点奇怪，因为它与MeteorJS完全不同，如果我做同样的事情。
答案 0 :(得分：3)
我相信你会想要使用同步数组而不是3路数据绑定https://www.firebase.com/docs/web/libraries/angular/quickstart.html#section-arrays
答案 1 :(得分：3)
正如@unobf所说，在这种情况下你应该使用AngularFire的$asArray。
Firebase在后台异步加载（并同步）您的数据。这意味着即使当前用户不是添加任务的用户，它也可能会收到对阵列的更新。当发生这种情况时，它需要（除了更新数组）通知AngularJS数据被修改。您调用$asObject来处理对象的此类通知，但不是为处理数组而设计的。要处理Firebase的有序集合（不使用索引，但使用不同类型的键）和AngularJS数组之间的复杂性，您需要使用$asArray。
.controller('mainController', function($scope, $firebase) {
// connect to firebase
var ref = new Firebase("https://XXX.firebaseio.com/todos");
var fb = $firebase(ref);
$scope.todos = [];
// sync as object
var syncObject = fb.$asArray();
// 3-way data binding
$scope.todos = syncObject; // was: syncObject.$bindTo($scope, "todos");
$scope.addNewTodo = function(){
var todoTitle = $(".add-todo").val();
var createdAt = new Date();
var element = {
title: todoTitle,
timestamp: createdAt,
done: false
};
$scope.todos.$add(element); // was: fb.$push(element);
$(".add-todo").val("");
};
您可以在此处找到一个有效的示例：http://jsbin.com/celefu
要了解有关此类问题的更多信息，请参阅我对这些问题的回答：