ng-grid and angularFire example
HTML
<script src="http://static.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script>
<link rel="stylesheet" href="http://angular-ui.github.io/ng-grid/css/ng-grid.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://angular-ui.github.io/ng-grid/lib/ng-grid.debug.js"></script>
<div ng-controller="ctrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<button ng-click="addRow()">add order</button>
<button ng-click="offline()">go offline</button>
<button ng-click="online()">go online</button> <span class="connection-state">{{ connectionState }}</span>
</div>
CSS
.gridStyle {
border: 1px solid rgb(212, 212, 212);
width: 400px;
height: 300px;
}
.connection-state {
color: red;
}
JavaScript
var app = angular.module('app', ['firebase', 'ngGrid']);
var fbUrl = 'https://consistent-pizza.firebaseio.com';
var fb = new Firebase(fbUrl);
var fbUrlConnected = new Firebase(fbUrl + '/.info/connected');
app.controller('ctrl', function ($firebase, $scope, orderByPriorityFilter) {
var serializeData = function(dataSnapshot) {
var ecOrders = [];
dataSnapshot.forEach( function(childSnapshot) {
var id = childSnapshot.name();
var ecOrder = childSnapshot.val();
ecOrder.id = id;
ecOrders.push(ecOrder);
});
localStorage.setItem( 'ecOrders', JSON.stringify(ecOrders) );
};
var deserializeData = function() {
var ecOrders = localStorage.getItem('ecOrders');
if( ecOrders ) {
fb.set( JSON.parse(ecOrders) );
}
};
$scope.offline = function () {
Firebase.goOffline();
};
$scope.online = function () {
Firebase.goOnline();
};
$scope.offline();
/*
// seed some test data
fb.set([{
destination: '222 Derech HaAvot',
item: 'xl pizza',
total: 10
}, {
destination: '1004 Lovell Ave',
item: 'spaghetti',
total: 11
}, ]);*/
$scope.connectionState = 'online';
$scope.data = $firebase(fb);
deserializeData();
$scope.online();
//console.debug($scope.data);
$scope.$watchCollection('data', function () {
$scope.myData = orderByPriorityFilter($scope.data);
});
var editableCellTemplate = '<input type="text" ng-input="COL_FIELD" ng-model="COL_FIELD" ng-blur="updateEntity(col, row)"/>';
var removeTemplate = '<button ng-click="removeRow($index)">delete order</button>';
$scope.gridOptions = {
data: 'myData',
enableCellEditOnFocus: true,
columnDefs: [{
field: 'destination',
displayName: 'destination',
width: 90,
editableCellTemplate: editableCellTemplate
}, {
...