CellTemplate ui-grid 中的 ng-if

Question

对于 cellTemplate，我有带有一个 ng-if 条件的“div”标签和带有其他条件的“a”标签。我想要的是当行中选择的名称不是“FILE”类型时进入“div”标签，而“FILE”类型何时想要进入“a”标签并转到所选链接。有了这个解决方案，一切都进入了 div 标签。

我在其中定义这样的 ui-grid 组件的配置文件

"columnDefs": [
                {
                    "name": "id",
                    "displayName": "columns.id",
                    "headerCellFilter": "translate",
                    "visible": false
                },
                {
                    "name": "name",
                    "displayName": "columns.name",
                    "headerCellFilter": "translate",
                    "cellTemplate": "<div ng-if=\"row.entity.type != 'FILE'\" ng-click=\"grid.appScope.rowClick(row)\" style=\"cursor:pointer;\" class=\"ui-grid-cell-contents\">{{COL_FIELD CUSTOM_FILTERS}}</div><a ng-if=\"row.entity.type == 'FILE'\" href=\"{{'path/toUrl/FileId=' + row.entity.id}}\">{{COL_FIELD CUSTOM_FILTERS}}</a>"
                },
                {
                    "name": "type",
                    "displayName": "columns.type",
                    "headerCellFilter": "translate"
                }

然后在我的控制器中我有这样的东西

angular.module('search').controller('Search.ResultsController', ['$scope', 
    function ($scope) {
        $scope.$emit('req-component-config', 'results');

        $scope.config = null;
        $scope.gridOptions = {};
        $scope.$on('component-config', applyConfig);
        function applyConfig(e, componentId, config) {
            if (componentId == 'results') {
                $scope.gridOptions = {
                    enableColumnResizing: true,
                    enableRowSelection: true,
                    enableRowHeaderSelection: false,
                    multiSelect: false,
                    noUnselect: false,
                    paginationPageSizes: config.paginationPageSizes,
                    paginationPageSize: config.paginationPageSize,
                    useExternalPagination: true,
                    useExternalSorting: true,
                    //comment out filtering until service side supports it
                    ////enableFiltering: config.enableFiltering,
                    //enableFiltering: true,
                    useExternalFiltering: true,
                    columnDefs: config.columnDefs,
                    onRegisterApi: function (gridApi) {
                        $scope.gridApi = gridApi;

                    .....}
                  }
                 }
               }
   $scope.rowClick = function(row){
      console.log(row.entity.name);
    }

那么你可以在 cellTemplate 和带有 ng-if 的标签中使用类似的东西吗？

顺便说一句，我放入网格的数据类似于 { id: 1, name: "asdas", type:"FILE"...}.....

Answer 1

在列定义上使用 ui-grid 单元格模板的示例。 您可以看到我们如何通过单击按钮打开模态窗口以及我们如何使用 ng-if

            this.gridOptions = {
            enableSorting: true,
            enableFiltering: true,
            enableColumnMenus: false,
            data: this.plugins,
            columnDefs: [{
                name: 'plugin_id',
                displayName: 'Id',
                type: 'string',
                width: '3%',
                cellTemplate: '' +
                    '<div class="text-center">' +
                    '   <a title="details" href="/#/plugins/{{grid.getCellValue(row,col)}}">{{grid.getCellValue(row, col)}}</a>' +
                    ' <button  title="Show which experiments use this plugin" class="btn btn-danger btn-xs "  ng-click="grid.appScope.showExperimentsModal(row)"> <i class="fa fa-cogs" aria-hidden="true"></i>    </button>' +
                    '</div>'
            }, {
                name: 'metric.name',
                displayName: 'Metric Name',
                type: 'string',
                width: '25%',
                resizable: true
            }, {
                name: 'stored_procedure_name',
                displayName: 'Stored Procedure Name',
                type: 'string',
                width: '25%',
                resizable: true
            }, {
                name: 'creator_email',
                displayName: 'Creator',
                type: 'string',
                width: '15%',
                resizable: true
            }, {
                name: 'status.status',
                displayName: 'Status',
                type: 'string',
                width: '10%',
                resizable: true,
                cellTemplate: '' +
                    '<div class="text-center" ng-if="grid.appScope.isReady(grid.getCellValue(row,col))">' +
                    '<button class="btn btn-success btn-xs"><i class="fa fa-check-square-o" aria-hidden="true"></i> {{grid.getCellValue(row,col)}}</button>' +
                    '</div>' +
                    '<div class="text-center" ng-if="grid.appScope.isError(grid.getCellValue(row,col))">' +
                    '<button class="btn btn-danger btn-xs"><i class="fa fa-window-close-o" aria-hidden="true"></i> {{grid.getCellValue(row,col)}}</button>' +
                    '</div>' +
                    '<div class="text-center" ng-if="grid.appScope.isReview(grid.getCellValue(row,col))">' +
                    '<button class="btn btn-info btn-xs"><i class="fa fa-wrench" aria-hidden="true"></i> {{grid.getCellValue(row,col)}}</button>' +
                    '</div>' +
                    '<div class="text-center" ng-if="grid.appScope.isPending(grid.getCellValue(row,col))">' +
                    '<button class="btn btn-warning btn-xs"><i class="fa fa-wrench" aria-hidden="true"></i> {{grid.getCellValue(row,col)}}</button>' +
                    '</div>'
            }, {
                name: 'created_on',
                displayName: 'Created On',
                type: 'string',
                width: '10%',
                resizable: true
            }, {
                name: 'updated_on',
                displayName: 'Last Updated',
                type: 'string',
                width: '10%',
                resizable: true
            }]
        };
    }

当然你可以在你的范围内定义这些方法..

    showExperimentsModal = function(plugin) {
        return ExperimentsForm.showModal(this.$scope, plugin);
    }
    isReady = function(status) {
        return status === 'Ready'
    }
    isError = function(status) {
        return status === 'Error'
    }
    isPending = function(status) {
        return status === 'Pending'
    }
    isReview = function(status) {
        return status === 'Needs Review'
    }

希望它有意义。

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