Conditional cell template in ui-grid angularjs

You have to use externalScopes.

In your markup define the gridholder like this.

<div ui-grid="gridOptions" external-scopes="states" class="grid"></div>

And in your controller use this code:

var statusTxt = ['Active', 'Non Active', 'Deleted'];

$scope.states = {
  showMe: function(val) {
    return statusTxt[val];
  }
};

var statusTemplate = '<div>{{getExternalScopes().showMe(row.entity.status)}}</div>';
$scope.gridOptions = {
  columnDefs: [{
    field: 'code'
  }, {
    field: 'name'
  }, {
    field: 'status',
    cellTemplate: statusTemplate
  }]
};

Or use an angular filter.

Note that this only renders text. The best approach would be to transform myData to have real text states before using it in ui-grid. Just in case you want to do some text based filtering later on.

Here is a Plunker

I have got another solution for you without using external scopes:

The Template looks like this:

var statusTemplate = '<div>{{COL_FIELD == 0 ? "Active" : (COL_FIELD == 1 ? "Non Active" : "Deleted")}}</div>';

Here is the plunker:

http://plnkr.co/edit/OZtU7GrOskdqwHW5FIVz?p=preview

Use a cellFilter.

columnDefs: [
             { field: 'code' },
             { field: 'name' },
             { field: 'status', cellFilter: 'mapStatus'}
            ]


app.filter('mapStatus', function() {

  var statusMap = ['Active', 'Non Active', 'Deleted'];

  return function(code) {
    if (!angular.isDefined(code) || code < 0 || code > 2){
      return '';
    } else {
      return statusMap[code];
    }
  };
});

plunker: http://plnkr.co/edit/JwCrrrP4fJz85O0C0oEE?p=preview

I would suggest to use ng-if solve this problem.

  $scope.gridOptions = {
            columnDefs: [
                { field: 'code' },
                { field: 'name' },
                { field: 'status', cellTemplate: '<div ng-if="row.entity.status == 0">Active</div><div ng-if="row.entity.status == 1">Non Active</div>'}
            ]
        };