ng-grid and angularFire example

by jmjpro

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>
<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($firebase, $scope, orderByPriorityFilter) {
    $scope.data = $firebase(fb);
    $scope.myData = $firebase(fb);
    $scope.$watchCollection('data', function() {
       $scope.myData = orderByPriorityFilter($scope.data); 
    });
    $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}
]);