How to change and manipulate the data inside a cell ng-grid with AngularJS?
10,576
You can use an angular directive in the cellTemplate.
For example:
.directive('replacewithimage', function(){
return {
restrict: 'C',
replace: true,
transclude: true,
scope: { colValue:'@colValue' },
template: '<div ng-switch="colValue">' +
'<div ng-switch-when="IMAGE"><img src="#"></div> ' +
'<div ng-switch-default>{{valor}}</div> '
+'</div>'
}
})
and then use it in the cellTemplate of the ng-grid passing the "class" name as "replacewithimage" and the value as the "colValue" attribute
> ..
cellTemplate: '<div> class="replacewithimage"
> colValue="{{row.getProperty(col.field)}}"></div>'},
..
Author by
AngularOne
Updated on June 04, 2022Comments
-
AngularOne almost 2 years
I am using ng-grid from AngularJS:
var app = angular.module('myApp', ['ngGrid']); app.controller('MyCtrl', function($scope) { $scope.myData = gridData; $scope.gridOptions = { data: 'myData', columnDefs: ColumnArray }; });
I want to change a cell text inside a cell. How to do that? I was using cellTemplate:
ColumnObject.cellTemplate = GetCellTemplate();
But, my GetCellTemplate method can not read {{ row.getProperty(col.field) }} which is the data in the current cell. What to do in order to be able to read the cell data/text and change it in run time.
For example, if my cell has text like "My Name IMAGE" I want to be able to change the word "IMAGE" into a real image and display it in my ng-grid.
How can I do that?