ng-grid and angularFire example

by Kato Richardson

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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="http://angular-ui.github.io/ng-grid/css/ng-grid.css">
<script src="http://angular-ui.github.io/ng-grid/lib/ng-grid.debug.js"></script>
<h1>ngGrid using a Firebase array (object with sequential numeric keys)</h1>

<div ng-controller="ctrl">
    <div class="gridStyle" ng-grid="gridOptions"></div>
</div>

CSS

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px;
}

JavaScript

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

// seed some test data
fb.set([
    {name: "Moroni", age: 50},
    {name: "Tiancum", age: 43},
    {name: "Jacob", age: 27},
    {name: "Nephi", age: 29},
    {name: "Enos", age: 34}
]);