AngularJS - 为什么我无法实时更新我的数组长度？(AngularJS - Why can't I get my array length updated in real-time?)

 我正在使用AngularJS和Firebase填充一个简单的待办事项笔记应用程序。 （而且我也是AngularJS的新手！）To-do笔记将保存在$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数组中剩余的todos元素。 但是当我添加或删除$scope.todos数组中的元素时，它不会自动更新。 这对我来说有点奇怪，因为它与MeteorJS完全不同，如果我做同样的事情。 

I'm populating a simple To-do notes application using AngularJS and Firebase. (And I'm new to AngularJS, too !) The To-do notes will be saved in $scope.todos variable. This is my app.js code:
 
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("");
    };
});
 
And this is my index.html code:
 
<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>
 
I added {{todos.length}} for counting the remaining todos elements in the $scope.todos array. But it isn't automatically updated when I add or remove elements from the $scope.todos array. This is a bit strange for me cause it's quite different than what MeteorJS does, if I do the same thing.

原文：https://stackoverflow.com/questions/27665912