Add class to ng-class inside ng-grid cellTemplate

Question

I am quite new to Angular. I want to apply a custom class in ng-class in ng-grid's custom cell template. I am familiar with the overall usage of "ng-class". The default template is as follows:

<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>    {{row.getProperty(col.field)}}</span></div>

Now, I want to add a new class which is based on the row's data. Say:

ng-class="myClass:row.entity.Flag == 'something'"

Question: There is already a col.colIndex() in ng-class which is required by ng-grid. Now how to add my class with it?

I know it seems easy but it is not working.

I have tried following things:

1. https://github.com/angular-ui/ng-grid/wiki/Templating

2. https://docs.angularjs.org/api/ng/directive/ngClass

3. Tried ng-class="[col.colIndex(),{myClass:row.entity.Flag == something}]". Didn't work.
4. //scotch.io/tutorials/the-many-ways-to-use-ngclass

I just want a working 'ng-grid' template (which is defined above).

Answer 1

I got the answer after further research.

I wanted to add a class through which I can strike-through the data on the ng-grid row. I was applying it to the rowTemplate, but rowTemplate in itself do not have any textual data.

I have to apply it inside cellTemplate, which is actually going to contain the text.

@Jesse, thanx for your answer.

Answer 2

Try using

row.entity.subGridOptions.Flag

Answer 3

ng-class="{\'red\': row.entity.Expiration == \'No\'}"