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?

Solution

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 })"