Compare dates inside ng-repeat

Question

In my controller I have:

vm.today = new Date();
vm.calendar = ...fairly complicated logic...

In my view I have:

<tr ng-repeat="week in vm.calendar">
    <td ng-repeat="day in week track by $index">
        <div>
            calendar date: {{ day.date }}<br>
            today: {{ vm.today }}
        </div>
    </td>
</tr>

Here's what's in a sample cell:

calendar date: 2016-09-01T00:00:00
today: "2016-09-07T16:58:12.434Z"

How could I add an ng-if to the above that would only show if day.date was greater than or equal to vm.today

Something like this example (that doesn't work):

<tr ng-repeat="week in vm.calendar">
    <td ng-repeat="day in week track by $index">
        <div ng-if="day.date >= vm.today">
            calendar date: {{ day.date }}<br>
            today: {{ vm.today }}
        </div>
    </td>
</tr>

Thanks!

P.S. There is a similar question already on SO, but it didn't seem useful for my issue.

Are you sure you don't want to just filter by date instead? Because that's over here: http://stackoverflow.com/q/25515431/215552 — Heretic Monkey, Sep 07 '16 at 17:23

score 2 · Accepted Answer · answered Sep 07 '16 at 17:24

In cases like this you should create a controller function that accepts two parameters and returns a boolean. Also consider that you may be comparing dates to strings, so parsing is required before you can perform a meaningful comparison. So your div tag would look something like <div ng-if="vm.shouldDateBeShown(day.date, vm.today)"> and your function should use a library like moment (my personal preference) to do parsing and comparing:

vm.shouldDateBeShown = function(dt, today){
  var datea = moment(dt);
  var dateb = moment(today);
  return datea.diff(dateb, 'days') >= 0; 
}

This is great. Didn't know I could pass a function to `ng-if`. Thanks! — crowhill, Sep 07 '16 at 17:32

score 0 · Answer 2 · answered Sep 07 '16 at 17:30

You can create filter.

 <td ng-repeat="day in week track by $index | dateCompare">

JS :

  .filter('dateCompare',function(){
            var arrFinalWeek = [];
            return function(weekInChild,weekDataFromParent){

                    var timeStamp = new Date(date).getTime();
                    weekInChild.forEach(function(date,key){

                            if(new Date(date).getTime() >= timeStamp){
                                arrFinalWeek = arrFinalWeek.concat(date);
//depend on requirement u can delete it from existing  or 
//concat new array and return it
                            }
                    });

                return arrFinalWeek;
            }
        })

score 0 · Answer 3 · edited Sep 07 '16 at 21:00

0

Modify the ng-if condition to ng-if="day.date >= vm.today.toJSON()"

<tr ng-repeat="week in vm.calendar">
    <td ng-repeat="day in week track by $index">
        <div ng-if="day.date >= vm.today.toJSON()">
            calendar date: {{ day.date }}<br>
            today: {{ vm.today }}
        </div>
    </td>
</tr>

Fiddle example

edited Sep 07 '16 at 21:00

DamianoPantani

1,168
2
13
23

answered Sep 07 '16 at 17:53

Anvesh P

299
2
8

Compare dates inside ng-repeat

3 Answers3