Scott McD. Scott McD. - 3 months ago 83x
AngularJS Question

In ui-grid, I want to use a function for the colDef's field property. How can I pass in another function as a parameter to it?

When configuring an Angular ui-grid, you specify the field for each column definition. You can either use a string to point to the right field in the row.entity, or you can use a function. See this github issue for a quick summary of how:

When specifying the field using a function, I can pass in strings, objects, and arrays as arguments. For some reason, though, it doesn't work when I pass another function. In fact, the primary function to define the field doesn't even seem to execute at all.

Here is a plunkr that shows two tables. The top one lists names and ages, then combines the two in the third column using a function. It works fine as long as you pass in a string (in this case the word " years" after the age). The bottom table shows the case where it's passing in a secondary function that returns " years".

field: getNameAndAgeFunction(function(){return " years";})

In the second case, getNameAndAgeFunction() never seems to execute and the cell is left empty. Any idea of how I can pass a function in? Even better would be to pass that function in from the controller's scope. Many thanks!

Here is the JS:

var app = angular.module('myApp', ['ui.grid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [
{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34 }];

row.getNameAndAgeString = function(units){
return + '-' + this.age + units;
row.getNameAndAgeFunction = function(fx){
return + '-' + this.age + fx();

$scope.getUnits = function(){return " years"};

$scope.gridOptionsString = {
data: 'myData',
columnDefs: [{field: 'name', displayName: 'Name'},
{field:'age', displayName:'Age'},
{field: 'getNameAndAgeString(" years")', displayName: 'Name and age'},

$scope.gridOptionsFunction = {
data: 'myData',
columnDefs: [{field: 'name', displayName: 'Name'},
{field:'age', displayName:'Age'},
{field: 'getNameAndAgeFunction(function(){return " years";})', displayName: 'Name and age'},


This is due to the gridUtil.preEval function wich prepares the string you put in your field attribute.

It tranlsates:

  • to foo['bar']
  • to foo'bar'
  • {...}) to foo['bar(function() {}']

The last one is your case, but the resulting string seems not evaluable to me (using angular $parse method).

I was looking throug it and it looks like a string like the last one: {...})

is just not compatible with $parse method.

I'd suggest you to go with a custom cell template, you still would not be able to use nested function inside an angular expression (the ones with the curly brackets {{ ... }}) but you would have access to more variables like:

  • grid.appScope: the scope wherein the grid resides.
  • row: the row of the cell with custom template, row.entity gives access to entity values.
  • col: the column of the cell with custom template, col.colDef gives access to column definition

You can see more here and I edited your plunker to use this, here.