javascript 如何使用 AngularJS 更改和操作单元格 ng-grid 内的数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17449617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change and manipulate the data inside a cell ng-grid with AngularJS?
提问by AngularOne
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 GetCellTemplatemethod 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.
但是，我的 GetCellTemplate方法无法读取当前单元格中的数据{{ row.getProperty(col.field) }}。为了能够读取单元格数据/文本并在运行时更改它，该怎么做。
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.
例如，如果我的单元格有像“我的名字图像”这样的文本，我希望能够将单词“图像”更改为真实图像并将其显示在我的 ng-grid 中。
How can I do that?
我怎样才能做到这一点？
回答by l2mt
You can use an angular directive in the cellTemplate.
您可以在 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
然后在 ng-grid 的 cellTemplate 中使用它，将“类”名称作为“replacewithimage”传递，将值作为“colValue”属性传递
> ..
cellTemplate: '<div> class="replacewithimage"
> colValue="{{row.getProperty(col.field)}}"></div>'},
..
回答by user2644340
@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. But it displays NONE for both the rows not "Valid Data" or "Invalid Data".
cellTemplate 与您的代码相同。但是对于不是“有效数据”或“无效数据”的行，它都显示 NONE。
