Angular ng重复不保留Firebase优先级项的顺序?

时间:2014-11-07 23:31:14

标签: angularjs angularjs-ng-repeat firebase

Angular& amp; Firebase在这里,但注意到一个奇怪的行为,查询和呈现其他地方尚未解决的有序数据......

我正在将数据推送到firebase并使用递减的负值设置优先级,以便最新数据位于列表顶部。

使用child_added事件检索ref时,我可以确认数据是否以正确的顺序到达;但是,当与ngRepeat一起使用时,数据会以某种方式反转(最新数据显示在ngRepeat列表的底部)。

如果我使用类似.append()的内容,则数据会被正确排序。但宁愿用ngRepeat做'Angular'方式。

// example html binding
// ====================================
<ul>
    <li ng-repeat="(itemID, item) in list">{{itemID}}</li>
</ul>


// example controller code
// ====================================
var laApp = angular.module('laApp', ['firebase']);

laApp.controller('laAppCtrl', function ($scope, $timeout){
    var ref = new Firebase('https://ngrepeatbug.firebaseio.com');

    $scope.pushPriority = function(){
        var uid = new Date().getTime();
        var priority = 0 - uid;
        // set with -priority so newest data on top
        ref.push().setWithPriority(uid, priority);
    }

    $scope.list = {};
    ref.orderByPriority().on('child_added', function(snap){
        $timeout(function(){
            var snapID = snap.key();
            var snapVal = snap.val();

            //repeat method
            $scope.list[snapID] = snap.val();

            //append method
            $('ul.append').append("<li>" + snapVal + "</li>")
        })
    })
});

比较ngRepeat和append方法的笔: http://codepen.io/juddam/pen/dIiLz

我已经阅读了其他解决方案,要么将$scope.list对象转换为数组,然后在客户端使用$ filter或颠倒顺序,但这就失去了按优先级存储数据并且直截了当的整个目的查询和呈现有序数据的方法。

知道orderByPriority是firebase v2.0的新手,所以想知道bug还是我错过了一些明显的东西?

1 个答案:

答案 0 :(得分:1)

您将孩子添加到对象中:

 $scope.list[snapID] = snap.val();

即使这看起来像是要添加到数组中,但您实际上是在添加常规对象。正如@ZackArgyle在评论中所说:对象中的键没有保证顺序。

如果要维护项目的顺序,则应将它们推入数组。

 $scope.list.push(snap.val());

这会为它们添加数字索引,这将维持它们的顺序。

如果您想同时维护项的顺序,则必须在数组中管理它们。

 $scope.list.push({ $id: snap.key(), value: snap.val() });

最后一种方法是AngularFire在致电$asArray()时所做的极为简化的版本。