CODEWITHSUNDEEP
javascriptangularjsangular-ui-grid
Rani Radcliff
Rani Radcliff

Reputation: 5084

Angular Ui-Grid Conditional CellTemplate

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.

Upvotes: 3

Views: 5494

Answers (2)

Malik Zahid
Malik Zahid

Reputation: 745

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

Upvotes: 0

MayK
MayK

Reputation: 1329

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.

Upvotes: 5

Related Questions