Angular UI-Grid 条件单元格模板答案

【问题标题】：Angular UI-Grid Conditional Cell TemplateAngular UI-Grid 条件单元格模板
【发布时间】：2015-09-10 19:53:00
【问题描述】：

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

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

【问题讨论】：

标签： angularjs angular-ui-grid angular-ui-select

【解决方案1】：

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

我添加了一个 Plunkr，它演示了显示/隐藏 cellTemplate 的可能性。

首先，您将 ng-click 添加到 ui-grid 行模板，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 的检查，以便您在点击时添加/删除。在 ColumnDefs 中，您可以看到对 isRowSelected() 检查的引用，您可以在其中传入 row.uid。解析当前数组并返回 true 或 false。

【讨论】：

这可行，但是否可以在用户选择另一个值之前保持列中的名字可见？您在示例数据数组中定义了 firstName，但是在用户单击单元格之前，该列为空。我还在 ui-grid 文档 onRegisterApi 中找到了这些：function (gridApi) { $scope.gridApi = gridApi; gridApi.selection.on.rowSelectionChanged($scope, function(row){ //这里有一些函数 }); //gridApi.selection.on.rowSelectionChangedBatch($scope, callbackFunction); },
没关系，我知道了Plunkr。感谢您的帮助。