[英]How to change and manipulate the data inside a cell ng-grid with AngularJS?
I am using ng-grid from AngularJS: 我正在使用AngularJS的ng-grid:
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:
我正在使用cellTemplate:
ColumnObject.cellTemplate = GetCellTemplate();
But, my GetCellTemplate method can not read {{ row.getProperty(col.field) }} which is the data in the current cell. 但是, 我的GetCellTemplate方法无法读取{{row.getProperty(col.field)}} ,这是当前单元格中的数据。 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. 例如,如果我的单元格中有诸如“我的名字图像”之类的文本,我希望能够将单词“ IMAGE”更改为真实图像并将其显示在ng-grid中。
How can I do that? 我怎样才能做到这一点?
You can use an angular directive in the cellTemplate. 您可以在cellTemplate中使用angular指令。
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 然后在ng-grid的cellTemplate中使用它,并将“类”名称传递为“ replacewithimage”,并将值作为“ colValue”属性
> ..
cellTemplate: '<div> class="replacewithimage"
> colValue="{{row.getProperty(col.field)}}"></div>'},
..
@l2mt, I tried your example with following changes: @ l2mt,我通过以下更改尝试了您的示例:
template: '<div ng-switch="colValue">' +
' <div ng-switch-when="1">Valid Data</div>' +
'<div ng-switch-when="2">Invalid Data</div>' +
'<div ng-switch-default>NONE</div>' +
'</div>
There are 2 row in a ng-grid column with values 1 and 2. ng-grid列中有2行,其值分别为1和2。
cellTemplate has the same code as yours. cellTemplate与您的代码相同。 But it displays NONE for both the rows not "Valid Data" or "Invalid Data".
但是对于两行都显示“ NONE”,而不是“有效数据”或“无效数据”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.