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.
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