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!

Caesarea

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). – Swank

Thanks, will give it a shot as I'm in from of my dev environment next time. – Caesarea

No luck, a fiddle would be perfect. – Caesarea

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. – Swank

Could be me, but I'm missing totally how you bind to your 'grades' model in the second approach? – Nittygritty

i'm having the same issue, and i verified that if i change all my IDs to be simple integers (instead of firebase's autogenerated keys eg '-JB00ZLshXNv8TfQQcY3') then ng-grid works fine – Bresee

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

Bresee

Having trouble seeing how this works with the 'loaded' event... Seems like the callback isn't the data itself but just the key of the item that was either added or modified (no indication of which it was AFAIK). Any ideas on the best way to keep the 2-way binding working between AngularFire's service and ng-grid ? – Pellitory