javascript - 如何使用 AngularJS 更改和操作单元格 ng-grid 中的数据？

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) }}。为了能够读取单元格数据/文本并在运行时更改它，该怎么做。

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

我该怎么做？

Answer 1

您可以在 cellTemplate 中使用 Angular Directive(指令)。

例如:

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