Как изменить и манипулировать данными внутри ячейки ng-grid с помощью AngularJS?

Я использую ng-grid из AngularJS:

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

Я хочу изменить текст ячейки внутри ячейки. Как это сделать? Я использовал клеточный шаблон:

ColumnObject.cellTemplate = GetCellTemplate();

Но мой метод GetCellTemplate не может прочитать {{ row.getProperty(col.field) }}, который является данными в текущей ячейке. Что сделать, чтобы иметь возможность читать данные/текст ячейки и изменять их во время выполнения.

Например, если в моей ячейке есть текст типа «Мое имя ИЗОБРАЖЕНИЕ», я хочу иметь возможность изменить слово «ИЗОБРАЖЕНИЕ» на реальное изображение и отобразить его в моей сетке ng.

Как я могу это сделать?


javascript angularjs ng-grid
person AngularOne    schedule 03.07.2013    source источник
comment
Можете ли вы создать jsfiddle?   -  person zs2020    schedule 03.08.2013
comment
попробуйте прочитать вот так row.entity.{property name}   -  person Vinod Louis    schedule 03.08.2013

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать директиву angular в файле cellTemplate.

Например:

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


    })

а затем используйте его в cellTemplate ng-grid, передавая имя «класса» как «replacewithimage» и значение как атрибут «colValue».

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

arrow_upward
0
arrow_downward

@ 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 для обеих строк, а не «Действительные данные» или «Недопустимые данные».

person user2644340    schedule 02.08.2013