Cell templates based on the cell value - angular-ui-grid

Question

I have an angular grid with a first column row has to be shown as an anchor link or a label based on a javascript condition of that cell value doesnt starts with the character 'M'. If cell value of column 1 starts with character 'M' the column shpuld be an label otherwise it should be an hyeprlink. I do beleive that i have to use two different cell templates, but not sure how to call those on the row databind event of uigrid. Below is the code.
Templates for anchor and label:
var linkCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' +
' <a class="text-blue-color text-underline" href="' + getURL() + '/ClaimDetail/Index?TagNumber={{row.entity.TagNumber}}&from=linkcomfort&Style=' + Style + '" target="_blank";">{{row.entity.TagNumber}}</a>' +
'</div>';
var labelCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' +
' <label>{{row.entity.TagNumber}}</label>' +
'</div>';
Below is the grid
$scope.ComfortPlanGrid = {
enableGridMenu: true,
exporterMenuCsv: true,
exporterMenuPdf: false,
gridMenuShowHideColumns: true,
enableRowSelection: false,
enableColumnMenus: false,
enableFiltering: false,
enablePaging: false
};
$scope.ComfortPlanGrid.columnDefs = config.headers.comfortPlansHeadersGrid;
Below is the grid headers
var headers = {
comfortPlansHeadersGrid: [
{ field: 'TagNumber', width: 130, displayName: 'Claim Tag Nbr', cellTemplate: linkCellTemplate },
{ field: 'CustomerNumber', width: 200, displayName: 'Customer/Dealer' },
{ field: 'Status', width: 80, cellTooltip: true },
{ field: 'StatusDate', width: 175, displayName: 'Status Date' },
{ field: 'Description', displayName: 'Description', width: 270, cellTemplate: claimDetailTemplate },
{ field: 'ContractNumber', width: 200, displayName: 'Contract Number', headerTooltip: 'Contract Number' },
{ field: 'ServiceDate', width: 175, displayName: 'Service Date', headerTooltip: 'Service Date' }
]};
Any help on how to achieve this is appreciated.

Answer 1

Try the below code:
Add the celltemplate in the coldef on the relevant column
cellTemplate: DisplayConditionalTemplate(value)
function DisplayConditionalTemplate(value){
var linkCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' +' <a class="text-blue-color text-underline" href="' + getURL() + '/ClaimDetail/Index?TagNumber={{row.entity.TagNumber}}&from=linkcomfort&Style=' + Style + '" target="_blank";">{{row.entity.TagNumber}}</a>' + '</div>';
var labelCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">'+' <label>{{row.entity.TagNumber}}</label>' + '</div>';
if(value.charAt(0) === 'M')
return labelCellTemplate;
else
return linkCellTemplate;
}