如何创建3路数据angularFire 0.5.0和最新的NG-电网之间的结合？ [英] How to create 3 way data binding between angularFire 0.5.0 and latest ng-grid?

问题描述

angularFire $绑定方法可以在这里找到： http://angularfire.com/flatdoc.html 和时尚NG-电网可以在这里找到： http://angular-ui.github.io/ NG-网/

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

然后

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

我的意思是，即使可能吗？ ：）

I mean, is that even possible? :)

推荐答案

这当然是可能的。在我们进入的是如何，让我们回顾几个重要的细节：

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

1. 火力地堡和angularFire中的对象工作和ngGrid想阵列（我们需要一个过滤器）


2. angularFire是常见的情况有很大的包装，但不能访问火力地堡的唯一途径


3. 有一个在火力地堡一种特性，它会自动顺序，数字ID转换成数组，这是我们可以利用的优势。

所以，在考虑到这些细节，有两种简单的方法。

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

利用火力地堡阵列仿真

假设我们的数据是一个简单的数组，我们不会被删除键（如果ID是不连续的我们的数组为对象），那么我们可以恰到好处从火力地堡引用数据。

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.

下面的小提琴证明下面的例子：在

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筛选到一个数组过滤器。

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.

下面的小提琴证明下面的例子：在

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

这篇关于如何创建3路数据angularFire 0.5.0和最新的NG-电网之间的结合？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！