Angular Ui-Grid 条件单元格模板

Posted 2023-02-22

【中文标题】Angular Ui-Grid 条件单元格模板

【英文标题】：Angular Ui-Grid Conditional CellTemplate

【发布时间】：2016-09-16 19:32:19

【问题描述】：

只要字段值不是空字符串，我就需要在我的 ui-grid 中显示一个按钮。我尝试使用ng-if，但它不起作用。这是我的网格选项中的代码：

   field: 'ReleaseStatus', 
    width: 125, 
    displayName: 'Release Status', 
    cellTemplate: 
    '<div ng-if="row.entity.ReleaseStatus != """>
        <button id="editBtn" 
            type="button" 
            class="btn btn-default"  
            data-toggle="modal" 
            data-target="#myModal" 
            ng-click="grid.appScope.launch(row)">
            COL_FIELD
        </button>
    </div>'
   ,

没有ng-if，按钮显示效果很好。但是，由于某些记录的 ReleaseStatus 字段为空字符串，因此不应出现该按钮。

非常感谢任何帮助。

【参考方案1】：

你应该这样写：

'<div ng-if="row.entity.ReleaseStatus !== \'\'">'

您也可以将 ng-if 直接放在您要隐藏的按钮上。

但是使用 ng-if 时要小心，因为它每次都会创建一个新范围。

【讨论】：

“你应该这样写”下没有“示例”。

我必须使用转义字符 '\' 才能使用单引号。我认为它现在正在工作。

【参考方案2】：

解决方案 1： 有一个简单的方法可以做到这一点，请看一下这个例子。

    name: 'nameishere', displayName: 'Display Name', cellTemplate:
       '<div class="ui-grid-cell-contents" ng-if="grid.appScope.haveFile(row.entity.nameishere)"><a href="' + apiURL + '/InvalidFiles/row.entity.nameishere" download="row.entity.nameishere" > row.entity.nameishere</a></div>'+
       '<div class="ui-grid-cell-contents" ng-if="grid.appScope.haveNotFile(row.entity.nameishere)"> row.entity.nameishere</div>'
,

并创建多个函数或使用 if-else 函数

$scope.haveFile    = function (data)  return data == 'No File to Display' ;
$scope.haveNotFile = function (data)  return data != 'No File to Display' ;

解决方案2：你应该这样写，字符串和整数处理方式不同。

cellTemplate:'<div ng-if="row.entity.status !== \'Your String Here\'">'
cellTemplate:'<div ng-if="row.entity.status  !== 23>'

解决方案 3： 像这样使用 ng-if

cellTemplate:'<div>row.entity.status  == 0 ? "Active" : (row.entity.status  == 1 ? "Non Active" : "Deleted")</div>';