如何使用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）}} ，这是当前单元格中的数据。 为了能够读取单元格数据/文本并在运行时对其进行更改，该怎么做。

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

我怎样才能做到这一点？

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中使用它，并将“类”名称传递为“ 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”，而不是“有效数据”或“无效数据”。