Convert date to age in ng-repeat

Question

I am trying to convert my date in ng-repeat to age.

But when I use a scope in my controller:

$scope.calculateAge = function(birthday) { 
    var ageDifMs = Date.now() - new Date(birthday);
    var ageDate = new Date(ageDifMs);
    return Math.abs(ageDate.getUTCFullYear() - 1970);
}

Or when I use filter:

myApp.filter('ageFilter', function() {
 function calculateAge(birthday) { // birthday is a date
     var ageDifMs = Date.now() - birthday.getTime();
     var ageDate = new Date(ageDifMs); // miliseconds from epoch
     return Math.abs(ageDate.getUTCFullYear() - 1970);
 }

       return function(birthdate) { 
             return calculateAge(birthdate);
       }; 
      });

With this HTML:

  <div ng-repeat="user in users | limitTo:20" class="col-50">
    <div class="memba-picture" style="background:url({{ user.picture }}">
      <div class="memba-gradient"><i class="fa fa-check memba-wanted"></i></div>
        <span class="memba-title">{{user.first_name}}</span>
        <p class="memba-age">{{user.more.birthday | ageFilter}} Ans</p> <!-- Or calculateAge -->
    </div>
  </div>

It doesn't work. But when I get date with scope in my controller, it works. I think it's maybe because when I get date, I convert it with good format:

  userRef.child(birthday).once('value', function(snap) {

    $scope.birthday = new Date(snap.val());

  })

How can I get the age correctly?

Thanks.

what does `user.more.birthday` look like? Any errors thrown? — charlietfl, Oct 10 '16 at 15:37
Like that : 1992-05-07T22:00:00.000Z , and I have any error ... It's just when I want use filter (or scope), nothing happen ... — PalmThreeStudio, Oct 10 '16 at 15:38
create a demo in plunker or other sandbox that reproduces this using your filter — charlietfl, Oct 10 '16 at 15:44
would like to see the actual value passed to the filter. as I have faced a similar kind of problem. so expose the json !! — Aravind, Oct 10 '16 at 15:56
Hello Aravind, I use Firebase for retrieve my JSON data, I think ng-repeat isn't connected to filter because it's don't passed to controller, it's calculated in template ... Charliefl I try to make JSFiddle, but if someone know the answer I want to know it too :) — PalmThreeStudio, Oct 10 '16 at 16:00

score 0 · Answer 1 · answered Oct 10 '16 at 16:05

Try this, Convert string date to Date like line 3 in filter

var jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope){
  $scope.birthdate = "1992-05-07T22:00:00.000Z";
});

jimApp.filter('ageFilter', function() {
     function calculateAge(birthday) { // birthday is a date
         var ageDifMs = Date.now() - new Date(birthday).getTime();
         var ageDate = new Date(ageDifMs); // miliseconds from epoch
         return Math.abs(ageDate.getUTCFullYear() - 1970);
     }

     return function(birthdate) { 
           return calculateAge(birthdate);
     }; 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
    <div>{{birthdate | ageFilter}}</div>
</div>

Hello, this solution works, I use this when I want retrieve age by date in controller. But I don't want this, I want retrieve age by date in ng-repeat. — PalmThreeStudio, Oct 10 '16 at 17:23

score 0 · Accepted Answer · edited May 23 '17 at 12:17

Thanks to the solution given by PixelBits at this question, I was able to solve my problem. Here is how I proceeded:

Controller:

$scope.calculateAge = function calculateAge(birthday) { // birthday is a date
    var ageDifMs = Date.now() - birthday.getTime();
    var ageDate = new Date(ageDifMs); // miliseconds from epoch
    return Math.abs(ageDate.getUTCFullYear() - 1970);
}

HTML

{{ calculateAge(user.more.birthday) }}

Thank you all !

Convert date to age in ng-repeat

2 Answers2