Conditional expression in Angular.js templates

Question

I'm trying to build a monthly calendar using Angular.js, and I can't seem to find a way of outputting expressions when conditions are satisfied.

  <tr>
    <td ng-repeat="date in dates">
      {{date}}
    </td>
    {{'</tr><tr>' | if date.getDay() === 0}}
  </tr>

Or

  <tr>
    <td ng-repeat="date in dates">
      {{date}}
      {{ if date.getDay() === 0 expr = '</tr><tr>' else expr = ''}}
    </td>
    {{expr}}
  </tr>

How could I achieve this?

Thanks.

Your code implies your date to be an object. If so, {{date}} would render the string representation of that object. — mitch
– mitch, Commented Dec 6, 2013 at 17:19
I just copied some example code from my project, it doesn't matter if it's a date object. — Sebastian
– Sebastian, Commented Dec 6, 2013 at 17:22
@fdomig answer is a good choice. Use ng-repeat. If your collection needs filtering, add a filter in the ng-repeat. — mitch
– mitch, Commented Dec 6, 2013 at 17:26
I think you are set on one specific direction. You can solve your issue by taking an alternative that might be cleaner and easier to read. You should let the data drive the DOM without trying to manipulate the DOM markup directly. — mitch
– mitch, Commented Dec 6, 2013 at 18:50

fdomig · Accepted Answer · 2013-12-06 13:43:56Z

2

You could use the built in ng-if directive.

<tr ng-if="date.getDay() === 0">

The better solution could be a nested ng-repeat so you don't even have to do these checks. For instance:

<tr ng-repeat="week in weeks">
    <td ng-repeat="day in week.days">...</td>
</td>

edited Dec 6, 2013 at 13:43

answered Dec 6, 2013 at 12:50

fdomig

4,4673 gold badges30 silver badges39 bronze badges

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

3 Comments

Sebastian Over a year ago

I can't use ng-if, because adding a tr tag wouldn't help me, I need to close the tag and open it, so I can get to the next row.

fdomig Over a year ago

You can use the ng-if in both, the <tr> and </tr> tag.

mitch Over a year ago

To add to @fdomig, add a filter to filter days that getDay() return zero.

Collectives™ on Stack Overflow

Conditional expression in Angular.js templates

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related