Angular Ui-Grid Conditional CellTemplate

Question

I need to show a button in my ui-grid as long as the field value is NOT an empty string. I tried using ng-if but it is not working. Here is the code in my grid options:

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

Without the ng-if the button displays and works great. However, because some records have an empty string for the field ReleaseStatus, the button should not appear.

Any assistance is greatly appreciated.

MayK · Accepted Answer · 2016-05-19 18:41:55Z

5

you should write it this way:

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

you can also put the ng-if directly on the buttom you are trying to hide.

however be careful of using ng-if because it creates a new scope everytime.

edited May 19, 2016 at 18:41

answered May 19, 2016 at 18:33

MayK

1,3291 gold badge10 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rani Radcliff Over a year ago

there is no "example" under "you should write this way".

Rani Radcliff Over a year ago

I had to use the escape character '\' in order to use the single quotes. I think it is working now.

Malik Zahid · Accepted Answer · 2021-12-22 10:55:17Z

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

Collectives™ on Stack Overflow

Angular Ui-Grid Conditional CellTemplate

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related