How To Create 3 Way Data Binding Between AngularFire 0.5.0 And Latest Ng-grid?

angularFire $bind method can be found here : http://angularfire.com/flatdoc.html and latest ng-grid can be found here : http://angular-ui.github.io/ng-grid/ I tried the simplest po

Solution 1:

It's certainly possible. Before we get into the how, let's review a couple important details:

1. Firebase and angularFire both work in objects and ngGrid wants arrays (we'll need a filter)
2. angularFire is a great wrapper for common use cases, but not the only way to access Firebase
3. There is a feature in Firebase which automatically converts sequential, numeric IDs to arrays, which we can take advantage of.

So with those details in mind, there are two easy approaches.

Leveraging Firebase array emulation

Assuming our data is a straightforward array and that we won't be deleting keys (if the ids aren't sequential our array becomes an object), then we can just reference the data right from Firebase.

Here's a fiddle demonstrating the following example:

var app = angular.module('app', ['firebase', 'ngGrid']);
var fb = new Firebase('https://nggrid-example.firebaseio-demo.com/');

app.controller('ctrl', function($timeout, $scope) {
    $scope.myData = [];
    fb.on('value', function(snap) {
        // force a compile since we aren't in $digest
        $timeout(function() {
           $scope.myData = snap.val();
        });
    });
    $scope.gridOptions = { data: 'myData' };
});

Using a filter on angularFire data

However, if we want to stick with pure angularFire, or our data is going to be editing in real-time by multiple users (which would wreak havoc on an array), we can filter the data into an array using the orderByPriority filter.

Here's a fiddle demonstrating the following example:

var app = angular.module('app', ['firebase', 'ngGrid']);
var fb = new Firebase('https://nggrid-example.firebaseio-demo.com/');

app.controller('ctrl', function($firebase, $scope, orderByPriorityFilter) {
    $scope.data = $firebase(fb);
    $scope.myData = $firebase(fb);
    $scope.$watchCollection('data', function() {
       $scope.myData = orderByPriorityFilter($scope.data); 
    });
    $scope.gridOptions = { data: 'myData' };
});