angularjsangular-ui-grid

Using a function in cell template


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?


Solution

  • 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