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!

angular / angularFire versions? Hint: 1.2+ has much better equality checking. Also, try using angularFireCollection here, you'll probably have better luck with an array that is updated (collection) rather than an object that is replaced on updates (angularFire). — Kato
Thanks, will give it a shot as I'm in from of my dev environment next time. — Timo Wallenius
Hey Tim, check out angularFire-seed tag 0.3 for examples of 0.3's angularFire and angularFireCollection, or the latest release for $firebase examples. — Kato
Could be me, but I'm missing totally how you bind to your 'grades' model in the second approach? — AardVark71

realgt realgt · Accepted Answer · 2013-12-17T15:10:33

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

Using ng-grid with angularFire - key naming issues

1 Answers