Using ng-grid with angularFire - key naming issues

Question

I've played around with this a bit now, but can't get my head around it:

(Using angular 1.2.2, angularFire 0.5.0 and latest ng-grid)

So I have a firebase and I'm using angularFire to extract my data into an ng-grid component like this:

//First I go get my data, in this case something called 'grades' from ..../db/grades
    var promise = angularFire(new Firebase($scope.fireBaseUrl), $scope, 'grades');
//When they're fetched I start up a watcher
    promise.then(function(grades) {
    startWatchGrade($scope, filterFilter, appSettings);
});

//Then I bind that grades as a datasource to my ng-grid
$scope.gridOptions = { 
data: 'grades',
enableCellSelection: false,
enableRowSelection: true,
etc....,

Works great and I've done controls that add new items to 'grades' (push) and remove items (splice) and everything gets reflected to the ng-grid quite nicely. Like so:

//Adding new like this is ok
$scope.grades.push({some-new-data-here});

//Deleting old like this is ok
$scope.grades.splice(row.rowIndex, 1);

But this approach does auto-generated int-based keys to the firebase that change all the time when modified so I wanted to get control of the keys so I changed adding the items to use instead:

var fbRef = new Firebase($scope.fireBaseUrl);
var newRef = fbRef.push({some-items-here});

And everything works ok storing the data into firebase with my non-integer ids, but it doesn't bind to the ng-grid anymore. Dumping the 'grades' into the console shows all the rows being returned, but it doesn't show up in the ng-grid.

So in a nutshell: Integer based index generated by angularFire works ok in ng-grid, custom alphanumeric created by firebase.push doesn't.

I hope it doesn't sound too cryptic. Thought of doing a fiddle, but let's hope it's some 'gotcha' I've overlooked and simple to solve. If not I'll try to patch one up.

Thanks!

Answer 1

As per the documentation, $firebase always returns objects, not arrays, which don't work so well with ng-grid. In this case, angularfire provides a filter to help, orderByPriority. Make sure to inject $filter into your controller.

(Note: I did not use promises or watchers, only the built in events with angularfire)

$scope.grades = $firebase(new Firebase($scope.fireBaseUrl));
$scope.gradesData=[];
$scope.gridOptions = { data: 'gradesData'}
$scope.grades.$on("loaded", function(data) {
    var arrData = $filter("orderByPriority")(data);
    $scope.$apply(function(){$scope.gradesData = arrData;});
});

You can try a similar approach for $on.('change'...) for new rows.

hope that helps