angularjsangular-ui-grid

Conditional cell template in ui-grid angularjs


How to add conditional when showing data in ui-grid cellTemplate below:

$scope.status = ['Active', 'Non Active', 'Deleted'];
$scope.gridOptions = {
    columnDefs: [{
        field: 'code'
    }, {
        field: 'name'
    }, {
        field: 'status',
        cellTemplate: '<div>{{status[row.entity.status]}}</div>'
    }]
};

The expected result should be row status show Active/NonActive/Deleted.

Here is the plunker

Thanks in advance.


Solution

  • 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