Question

对于cellTemplate我有＆＃34; div＆＃34;标签有一个ng-if条件和＆＃34; a＆＃34;标签与其他条件。我想要的是当行中选定的名称不是类型＆＃34; FILE＆＃34;进入＆＃34; div＆＃34;标签和何时属于＆＃34; FILE＆＃34;想要进入＆＃34; a＆＃34;标记并转到所选链接。有了这个解决方案，一切都会进入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，名称：＆＃34; asdas＆＃34;，输入：＆＃34; FILE＆＃34; ...} .....

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

希望它有意义。

ng-if在CellTemplate ui-grid中

1 个答案: