Introduction
Today I tried out Angularjs and posted about it. After that it was time to add a grid to make my data look better. And I picked ng-grid.
Installation
These are the packages I am using.
- angularjs 1.0.4
- jQuery 1.9.0
- Moment.js 1.7.2
- ng-grid 1.6.0
But the ng-grid package does not contain the scripts. So I had to get those manually. I took the ones on github. The ng-grid.1.6.3.js and ng-grid.css.
Server
See my previous post on angularjs for this.
Client
My app.js changes a little.
angular.module('plantsapp', ['ngGrid']).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/plants', { templateUrl: 'partials/plants.html', controller: PlantsController }).
when('/plants/:Id', { templateUrl: 'partials/plant.html', controller: PlantController }).
otherwise({ redirectTo: '/plants' });
}]);```
I just added the ngGrid string.
My controller.js will change a little too. And then specifically my PlantsController.
```js
function PlantsController($scope, $http) {
$scope.plants = [];
$scope.myOptions = {
data: 'plants'
};
$http.get('http://localhost:59025/plants').success(function (thisdata) {
$scope.plants = thisdata;
});
}
See how I instantiate my plants outside the get. And then I add the myOptions line.
In the Index.html I will add these two lines.
<link href="css/ng-grid.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.9.0.min.js"></script>
<script src="/Scripts/ng-grid.js"></script>```
And the plants.html file changes to this.
```html
<div ng-grid="myOptions"></div>```
The myOptions is the same as what property I added in my PlantsController.
And tada.
<div class="image_block">
<a href="/wp-content/uploads/users/chrissie1/angularjs/angularjs4.png?mtime=1359918800"><img alt="" src="/wp-content/uploads/users/chrissie1/angularjs/angularjs4.png?mtime=1359918800" width="910" height="498" /></a>
</div>
But you might see that the date is not well formatted. Let’s fix that.
## Formatting the date
First we need to add moment.js import to our index.html.
Then we need to add a filter to our app.js.
Like this.
```js
angular.module('plantsapp', ['ngGrid']).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/plants', { templateUrl: 'partials/plants.html', controller: PlantsController }).
when('/plants/:Id', { templateUrl: 'partials/plant.html', controller: PlantController }).
otherwise({ redirectTo: '/plants' });
}]).filter('moment', function () {
return function (dateString, format) {
return moment(dateString).format(format);
};
});;
And now we need to change our controller so that we can add this filter to our column definition for DateAdded.
Like this.
js
function PlantsController($scope, $http) {
$scope.plants = [];
$scope.myOptions = {
data: 'plants',
columnDefs: [
{field:'Id', displayName:'Id'},
{field:'Name', displayName:'Name'},
{ field: 'Genus', displayName: 'Genus' },
{ field: 'DateAdded', displayName: 'Date added', cellFilter:"moment:'DD/MM/YYYY h:m'" }
]
};
$http.get('http://localhost:59025/plants').success(function (thisdata) {
$scope.plants = thisdata;
});
}
Of course we could set our fofrmat straight in the filter and and then just use the moment filter.
For this we just need to change the filter to this.
js
return moment(dateString).format('DD/MM/YYYY h:m');
and the columndefinition then becomes this.
js
{ field: 'DateAdded', displayName: 'Date added', cellFilter:"moment" }
And tada!!!!
Conclusion
Once you get it ng-grid is pretty easy to set up. I just didn’t get it for the first hour or so. Because I had my $scope.myOptions in my Get function, because that looked so much like what they did in the getting started things. But I was wrong.
Chris is awesome.
