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 possible solution but it didnt work :

$scope.myData = [{name: "Moroni", age: 50},
                 {name: "Tiancum", age: 43},
                 {name: "Jacob", age: 27},
                 {name: "Nephi", age: 29},
                 {name: "Enos", age: 34}];
$scope.gridOptions = { 
    data: 'myData',

    rowTemplate:'<div ng-style="{\'cursor\': row.cursor, \'z-index\': col.zIndex(), \'color\': \'rgb(248, 248, 248)\',\'background\': \'none repeat scroll 0% 0% rgba(51, 51, 51, 0.7)\' }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}" ng-cell></div>',
    headerRowTemplate: '<div ng-style="{ height: col.headerRowHeight,\'color\': \'rgb(248, 248, 248)\',\'background\': \'none repeat scroll 0% 0% rgba(51, 51, 51, 0.7)\'  }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngHeaderCell" ng-header-cell></div>',
    multiSelect: false,
    enableCellEditOnFocus: true,
    columnDefs: [{field: 'name', displayName: 'Name',editableCellTemplate: '<input type="text" ng-class="\'colt\' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" />'},
                 {field:'age', displayName:'Age',editableCellTemplate: '<input type="text" ng-class="\'colt\' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" />'}]


};
$scope.myData.$bind($scope,'gridData');

and then

<div class="gridStyle" ng-grid="gridOptions" ng-model="gridData"></div>

I mean, is that even possible? :)

回答1:

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

Firebase and angularFire both work in objects and ngGrid wants arrays (we'll need a filter)
angularFire is a great wrapper for common use cases, but not the only way to access Firebase
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' };
});

来源：https://stackoverflow.com/questions/20929801/how-to-create-3-way-data-binding-between-angularfire-0-5-0-and-latest-ng-grid

标签

javascript

angularjs

firebase

ng-grid

angularfire