wyc
wyc

Reputation: 55283

How to write a date | date:"MM" inside an ng-class?

I want to add the class month when agent.createdAt | date:"MM" equals to todaymonth (the code is inside a directive):

'<td ng-class="{\'month\': ???==todaymonth}"><span>{{todaymonth}}</span>{{agent.createdAt | date:\"yyyy-MM-dd HH:mm\"}}</td>'+

I don't know how to add the agent.createdAt | date:"MM". If I do this:

{\'month\': agent.createdAt | date:\"MM\"==todaymonth} Throws an unexpected expression error same with {\'month\': (agent.createdAt | date:\"MM\")==todaymonth}

How to do this correctly?

Upvotes: 1

Views: 52

Answers (2)

muenchdo
muenchdo

Reputation: 2181

Since you are putting in an expression, just use class instead of ng-class:

<td class="{{(createdAt | date:'MMM') == todayMonth ? (createdAt | date:'MMM') : ''}}">...</td>

The code above will give your <td> a class of Jan, Feb, etc., depending on the month.

I had some issues with class names being numbers, so I used MMM instead. todayMonth needs to be something like "Jan" accordingly.

This JSFiddle shows the whole thing in action.

Note: I changed some of the attribute names for better readability, so just copy & pasting into your code won't work.

Upvotes: 2

jtsnr
jtsnr

Reputation: 1210

I've used getMonth() method of Date class which has an start index of 0 so I've added 1 in the expression

'<td ng-class="{ month: agent.createdAt.getMonth()+1==todaymonth}"><span>{{todaymonth}}</span>{{agent.createdAt | date:\"yyyy-MM-dd HH:mm\"}}</td>'+

Upvotes: 0

Related Questions