2

私は 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) }}を読み取ることができません。セルのデータ/テキストを読み取り、実行時に変更できるようにするために何をすべきか。

たとえば、セルに「My Name IMAGE」のようなテキストがある場合、「IMAGE」という単語を実際の画像に変更して、ng-grid に表示できるようにしたいと考えています。

どうやってやるの？

4

2 に答える 2

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


    })

次に、「class」名を「replacewithimage」として、値を「colValue」属性として渡す ng-grid の cellTemplate で使用します。

> ..
  cellTemplate: '<div> class="replacewithimage"
> colValue="{{row.getProperty(col.field)}}"></div>'},
..
于 2013-07-08T03:11:48.660 に答える
0

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

値が 1 と 2 の ng-grid 列に 2 行あります。

cellTemplate には、あなたのものと同じコードがあります。ただし、「有効なデータ」または「無効なデータ」ではない行の両方に NONE が表示されます。

于 2013-08-02T22:18:18.470 に答える