Как создать трехстороннюю привязку данных между angularFire 0.5.0 и последней версией ng-grid?

Метод angularFire $bind можно найти здесь: http://angularfire.com/flatdoc.html и последнюю версию 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');

а потом

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

Я имею в виду, это вообще возможно? :)


firebase javascript angularfire angularjs ng-grid
person codepreneur    schedule 05.01.2014    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Это, конечно, возможно. Прежде чем мы перейдем к тому, как, давайте рассмотрим пару важных деталей:

  1. Firebase и angularFire работают с объектами, а ngGrid требует массивы (нам понадобится фильтр)
  2. angularFire — отличная оболочка для распространенных случаев использования, но не единственный способ доступа к Firebase.
  3. В Firebase есть функция, которая автоматически преобразует последовательные числовые идентификаторы в массивы, которыми мы можем воспользоваться.

Итак, учитывая эти детали, есть два простых подхода.

Использование эмуляции массива Firebase

Предполагая, что наши данные представляют собой простой массив и что мы не будем удалять ключи (если идентификаторы не являются последовательными, наш массив становится объектом), тогда мы можем просто ссылаться на данные прямо из 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.

Вот скрипка, демонстрирующая следующий пример:

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' };
});
person Kato    schedule 05.01.2014
comment
Но это еще не трехсторонняя привязка, потому что, когда я редактирую ячейку в ng-grid, а затем щелкаю из ячейки, значение также должно обновляться в firebase :) Однако работает отлично, просто мои обновленные значения не обновляются в firebase :( - person codepreneur; 06.01.2014
comment
если я добавлю ng-blur="updateEntity(col, row)" к своему editableCellTemplate:, а затем добавлю это: $scope.updateEntity = function(col,row){ console.log(row.entity); console.log(col.field); }; консоль отлично выходит из системы, но я также получаю эту ошибку: Error: Firebase.set failed: First argument contains an invalid key ($id) in property 'targetScope'. Keys must be non-empty strings and can't contain ".", "#", "$", "/", "[", or "]" @kato - person codepreneur; 06.01.2014
comment
Решил сам: «как заставить angularfire автоматически отправлять изменения ng grid onblur в firebase»> stackoverflow.com/questions/20941102/ - person codepreneur; 07.01.2014