如何在angularFire 0.5.0和最新的ng-grid之間創建3路數據綁定？

Question

angularFire $綁定方法可以在這裏找到：http://angularfire.com/flatdoc.html和最新的NG-網格可以在這裏找到：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'); 

然後

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

我的意思是，這甚至可能嗎？ :)

Answer 1

這當然有可能。在我們進入的是如何，讓我們來回顧幾個重要的細節：

1. 火力地堡和angularFire都工作在對象和ngGrid想陣列（我們需要一個過濾器）
2. angularFire是共同使用一個偉大的包裝但不是訪問Firebase的唯一方式
3. Firebase中有一項功能可自動將順序數字ID轉換爲數組，我們可以利用該功能。

因此，考慮到這些細節，有兩種簡單的方法。

利用火力地堡陣列仿真

假設我們的數據是一個簡單的陣列，並且我們將不被刪除鍵（如果ID是不連續的我們的陣列成爲一個對象），那麼我們可以只是參考來自Firebase的數據。

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

使用上angularFire數據過濾

然而，如果我們要堅持用純angularFire，或我們的數據會通過實時進行編輯多個用戶（這會對數組造成嚴重破壞），我們可以使用orderByPriority過濾器將數據過濾到數組中。

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