CODEWITHSUNDEEP
angularjsangularjs-ng-repeatfirebase
juddm
juddm

Reputation: 13

Angular ngRepeat not preserving order of Firebase priority items?

Pretty new to Angular & Firebase here, but noticed an odd behavior querying and presenting ordered data that isn't addressed anywhere else yet...

I'm pushing data to firebase and setting priority with a descending negative value so that newest data is on top of the list.

When retrieving the ref with child_added events, I can confirm the data is arriving in the correct order; however, when used with ngRepeat, the data is somehow getting reversed (newest data appears on bottom of ngRepeat list).

If I use something like .append() the data is correctly ordered. But would rather do it the 'Angular' way with ngRepeat.

// 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>")
        })
    })
});

Pen comparing ngRepeat and append methods: http://codepen.io/juddam/pen/dIiLz

I've read other solutions that either convert the $scope.list object into an array that is then used with $filter or reversing order on client, but this defeated the whole purpose of storing data by priority and having a straightforward method for querying and presenting ordered data.

Know orderByPriority is new to firebase v2.0 so wondering if bug or am I missing something obvious?

Upvotes: 1

Views: 546

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 598740

You're adding the children to an object with this:

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

Even though this looks like you're adding to an array, you're actually adding to a regular object. And as @ZackArgyle says in his comment: the keys in an object have no guaranteed order.

If you want to maintain the order of the items, you should push them into an array.

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

This adds them with numeric indices, which will maintain their order.

If you want to both maintain the order of the items and their key, you will have to manage them in an array.

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

That last approach is an extremely simplified version of what AngularFire does when you call $asArray().

Upvotes: 1

Related Questions