Angular UI-网格条件单元格模板

Question

我有一个显示来自外部 ui-select 数据的单元格模板。但是，我只希望单元格模板在行 is/are selected 时出现。这是我当前的代码：

$scope.gridOptions.columnDefs = [
  { name: 'resourceChannel', 
    cellTemplate: '<div ng-if="$(\'.ui-grid-row\').hasClass(\'ui-grid-row-selected\')">{{grid.appScope.channel.selected.channel}}</div>'},
];

Answer 1

您可以添加诸如 Row-Selected-Listener 和 ng-if 之类的东西 - 检查当前行是否在选择中。

我添加了一个 Plunkr 来演示 show/hide cellTemplate 的可能性。

首先，您将 ng-click 添加到 ui-grid rowtemplate，f.e。 addRowtoSelection().

$templateCache.put('ui-grid/uiGridViewport',
  ...
  "<div ng-repeat=\"(rowRenderIndex, row) in rowContainer.renderedRows track by $index\"" +
  "ng-click=\"grid.appScope.addRowtoSelection(row)\"" +
  ...
);

然后将该函数添加到您的 appScope。

all.gridOptions = {
        columnDefs: [
            {field: 'firstName', cellTemplate: '<div ng-if="grid.appScope.isRowSelected(row.uid)">something</div>'},
            {field: 'lastName'},
            {field: 'company'},
            {field: 'employed'}
        ],
        ...,    
        appScopeProvider : {
            addRowtoSelection : function(row) {
                var contains = false;
                for (var i = 0, len = all.rowsSelectedIds.length; i < len; i++) {
                    if(all.rowsSelectedIds[i] === row.uid) {
                        all.rowsSelectedIds.splice(i, 1);
                        contains = true;
                    }
                }
                if(!contains) {
                    all.rowsSelectedIds.push(row.uid);
                }
            },
            isRowSelected : function(id) {
                for (var i = 0, len = all.rowsSelectedIds.length; i < len; i++) {
                    if(all.rowsSelectedIds[i] === id) {
                        return true;
                    }
                }
                return false;
            },
        },

我还添加了对已选择的行 ID 的检查，以便您 add/remove 单击。在 ColumnDefs 中，您可以看到对 isRowSelected() 检查的引用，您在其中传入 row.uid。解析当前数组和 returns true 或 false.

Angular UI-网格条件单元格模板

Angular UI-Grid Conditional Cell Template

angularjs

angular-ui-grid

angular-ui-select