如何在 angularFire 0.5.0 和最新的 ng-grid 之间创建 3 路数据绑定？

angularFire $bind 方法可以在这里找到：http://angularfire.com/flatdoc.html http://angularfire.com/flatdoc.html最新的 ng-grid 可以在这里找到：http://angular-ui.github.io/ng-grid/ http://angular-ui.github.io/ng-grid/

我尝试了最简单的解决方案，但它不起作用：

$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>

我的意思是，这可能吗？ :)

这当然是可能的。在讨论具体方法之前，我们先回顾一下几个重要的细节：

1. Firebase 和 angularFire 都可以在对象中工作，而 ngGrid 需要数组（我们需要一个过滤器）
2. angularFire 是常见用例的一个很好的包装器，但不是访问 Firebase 的唯一方法
3. Firebase 中有一个功能可以自动将连续的数字 ID 转换为数组，我们可以利用它。

因此，考虑到这些细节，有两种简单的方法。

利用 Firebase 阵列模拟

假设我们的数据是一个简单的数组，并且我们不会删除键（如果 id 不连续，我们的数组将成为一个对象），那么我们可以直接从 Firebase 引用数据。

Here's 演示以下示例的小提琴 http://jsfiddle.net/katowulf/eTak7/:

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' };
});

对 angularFire 数据使用过滤器

然而，如果我们想坚持使用纯 AngularFire，或者我们的数据将由多个用户实时编辑（这会对数组造成严重破坏），我们可以使用 orderByPriority 过滤器将数据过滤到数组中。

Here's 演示以下示例的小提琴 http://jsfiddle.net/katowulf/TywxU/5/:

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' };
});