Angular UI-Grid: In a cell template, how to access the value from a different field/cell

Question

I've been trying to use the Angular UI-Grid plugin to render data tables, and I have the following example data:

var data = [
{"id" : 10, "name" : "Name 1", "city" : "San Francisco"},
{"id" : 12, "name" : "Name 2", "city" : "San Diego"},
{"id" : 20, "name" : "Name 3", "city" : "Santa Barbara"},
];

below is the columnDefs for gridOptions, in the name field, I need to create a hyperlink using ui-sref

$scope.gridOptions.columnDefs = [
{field: 'id', displayName: 'ID'},
{field: 'name',
cellTemplate: '<div class="ui-grid-cell-contents tooltip-uigrid" title="{{COL_FIELD}}">' +
                       '<a ui-sref="main.placeDetail{{placeId: \'{{row.entity.id}}\' }}">{{COL_FIELD CUSTOM_FILTERS}}</a></div>'
},
{field: 'city', enableSorting: true}
];

The table is rendered fine except for the row.entity.id value. The values I get in the hyperlinks (inside the name column) are sequential: 1, 2, and 3, instead of 10, 12, and 20 as defined in the data array, however, the id values displayed in the ID column is what I am expecting: 10, 12, and 20. I wonder how you would access the id field value inside the name field, and why are the id in the name cell are sequential?

Answer 1

You shouldn't need to use curly braces in ui-sref as you're already in a JS expression. Try this:

ui-sref="main.placeDetail({placeId: row.entity.id })"