Angular Ui-Grid 条件单元格模板

Question

只要字段值不为空字符串，我需要在我的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 字段上有空字符串，所以该按钮不应该出现。

非常感谢您的帮助。

- Rani Radcliff

Answer 1

你应该这样写：

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

你也可以直接在需要隐藏的按钮上使用ng-if。

但是要小心使用ng-if，因为它会每次创建一个新的作用域。

- MayK

---

在“你应该这样编写”的部分下没有“示例”。 - Rani Radcliff

我不得不使用转义字符 '' 来使用单引号。我认为现在它可以工作了。 - Rani Radcliff

Answer 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>';

- Malik Zahid