Question

我正在使用AngularJS的ng-grid：

var app = angular.module('myApp', ['ngGrid']);
    app.controller('MyCtrl', function($scope) {
        $scope.myData = gridData;
        $scope.gridOptions = {
                        data: 'myData',
                        columnDefs: ColumnArray
                        };
    });

我想更改单元格内的单元格文本。怎么做？我正在使用cellTemplate：

ColumnObject.cellTemplate = GetCellTemplate();

但是，我的GetCellTemplate 方法无法读取 {{row.getProperty（col.field）}} 这是当前单元格中的数据。该怎么做才能读取单元格数据/文本并在运行时更改它。

例如，如果我的单元格中包含“我的名字图像”这样的文字，我希望能够将“图像”一词更改为真实图像，并将其显示在我的网格中。

我该怎么做？

Answer 1

您可以在cellTemplate中使用angular指令。

例如：

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


    })

然后在ng-grid的cellTemplate中使用它，将“class”名称作为“replacewithimage”传递，将值作为“colValue”属性

> ..
  cellTemplate: '<div> class="replacewithimage"
> colValue="{{row.getProperty(col.field)}}"></div>'},
..

Answer 2

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

ng-grid列中有2行，值为1和2。

cellTemplate与您的代码相同。但是对于不是“有效数据”或“无效数据”的行，它都显示NONE。

如何使用AngularJS更改和操作单元格网格内的数据？

2 个答案: