如何在 angularFire 0.5.0 和最新的 ng-grid 之间创建 3 路数据绑定? [英] How to create 3 way data binding between angularFire 0.5.0 and latest ng-grid?

问题描述

angularFire $bind 方法可以在这里找到:http://angularfire.com/flatdoc.html最新的 ng-grid 可以在这里找到: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. Firebase 和 angularFire 都适用于对象，而 ngGrid 需要数组(我们需要一个过滤器)
2. angularFire 是常见用例的绝佳包装器，但不是访问 Firebase 的唯一方法
3. Firebase 中有一项功能可以自动将连续的数字 ID 转换为数组，我们可以利用这一点.

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

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

利用 Firebase 阵列模拟

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

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

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