Using a function in cell template - angularjs

Question

I am using angularjs with ui-grid. One column of the grid contains a timestamp that I would like to render as a properly formatted date.
Up to now, I tried like this but the function is never called.
$scope.formatDate = function(date) {
return '42';
};
$scope.columns = [
{field: 'date', cellTemplate: '<div class="ui-grid-cell-contents">formatDate({{row.entity.date}})</div>'},
{field: 'title'},
{field: 'quantity'},
//[...]
];
Instead, the function call is considered as a string literal. As a result, the column always displays formatDate(*timestamp*).
I only found a non-satisfying way of achieving it by defining a function on each single row when receiving them :
$scope.columns = [
{field: 'getFormattedDate()'},
//[...]
];
$http.post('/api/data/').success(function (data) {
$scope.gridOptions.data = data.elements;
$scope.gridOptions.data.forEach(function(row) {
row.getFormattedDate = function() {
return '42';
}
})
});
Any better suggestion?

Answer 1

If you want to access controller scope level functions using ui-grid you can use grid.appScope, here is a quick example:
{
name: 'date',
cellTemplate: '<div class="ui-grid-cell-contents">{{grid.appScope.parseDate(row.entity.date)}}</div>'
}
Full Example:
angular.module('myApp', ['ui.grid'])
.controller('myCtrl', ['$scope', function ($scope) {
$scope.parseDate = function (p) {
// Just return the value you want to output
return p;
}
$scope.parseName = function (p) {
// Just return the value you want to output
return p;
}
$scope.gridOptions = {
data: [{
name: "Foo",
date: "2015-10-12"
}, {
name: "Bar",
date: "2014-10-12"
}],
columnDefs: [{
name: 'name',
cellTemplate: '<div class="ui-grid-cell-contents">{{grid.appScope.parseName(row.entity.name)}}</div>'
}, {
name: 'date',
cellTemplate: '<div class="ui-grid-cell-contents">{{grid.appScope.parseDate(row.entity.date)}}</div>'
}]
};
}]);
Fiddle Example

Answer 2

To use function output the whole function call, not the arguments , needs to be wrapped in expression braces
<div class="ui-grid-cell-contents">{{ formatDate(row.entity.date) }}</div>

Answer 3

It's worth noting that the cellTemplate will not do anything if you don't include HTML in the format:
will not hit the formatting method "formatRating()":
columnDefs: [
{
name: 'starRating', headerCellClass: 'blue', headerTooltip: 'Star Rating',
cellTemplate: '{{grid.appScope.formatRating(row.entity.starRating)}}'
},
Works with the addition of a <span> in the cellTemplate:
columnDefs: [
{
name: 'starRating', headerCellClass: 'blue', headerTooltip: 'Star Rating',
cellTemplate: '<span>{{grid.appScope.formatRating(row.entity.starRating)}}</span>'
},
my format method:
$scope.formatRating = function (starRating) {
switch (starRating) {
case "ONE": return "1/5"; break;
case "TWO": return "2/5"; break;
case "THREE": return "3/5"; break;
case "FOUR": return "4/5"; break;
case "FIVE": return "5/5"; break;
}
}

Answer 4

I use the controllerAs: 'vm' option on my controller, so I had to do the following to call functions in a cellTemplate.
Define the function on the vm scope like this:
vm.$scope.getBitFlag = (flags, value) => (flags & value) ? "✅" : "⬜️";
Then use it like this:
cellTemplate: "<div>{{ grid.appScope.getBitFlag(row.entity.prefValue, 1) }}</div>"