ng-if in CellTemplate ui-grid

Question

For cellTemplate I have "div" tag with one ng-if condition and "a" tag with other condition. What i want is when selected name in row is not of type "FILE" to go in "div" tag and when is of type "FILE" want to go in "a" tag and go to selected link. With this solution everything goes into div tag.

config file where i define ui-grid components like this

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

Then in my controller i have something like this

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);
    }

So can u use something like this in cellTemplate and tags with ng-if?

Btw the data that i am putting in grid is something like { id: 1, name: "asdas", type:"FILE"...}.....

Answer 1

Solution 1: There is a simple way to do this, please have a look on this example.

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

and create multiple functions OR use a function with if-else

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

Solution 2: You should write it this way, string and integer handle in a different way.

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

Solution 3: Use ng-if like this

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

Answer 2

Example of using ui-grid cell templates on column definitions. You can see how we can open modal window with clicking a button and how we can use 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
            }]
        };
    }

And of course you can define those methods in your scope..

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

Hope it makes sense.