在 ng-repeat 中将日期转换为年龄答案

【问题标题】：Convert date to age in ng-repeat在 ng-repeat 中将日期转换为年龄
【发布时间】：2016-10-10 15:33:32
【问题描述】：

我正在尝试将我在 ng-repeat 中的日期转换为年龄。

但是当我在控制器中使用范围时：

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

或者当我使用过滤器时：

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);
       }; 
      });

使用此 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>

它不起作用。但是，当我在控制器中获得范围的日期时，它就可以工作了。我认为这可能是因为当我得到日期时，我将其转换为良好的格式：

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

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

  })

如何正确获取年龄？

谢谢。

【问题讨论】：

user.more.birthday 看起来像什么？是否抛出任何错误？
像这样： 1992-05-07T22:00:00.000Z ，我有任何错误......只是当我想使用过滤器（或范围）时，什么都没有发生......
在 plunker 或其他沙箱中创建一个演示，使用您的过滤器重现此情况
请使用您的控制器功能或 json 更新
希望查看传递给过滤器的实际值。因为我遇到了类似的问题。所以暴露 json !!

标签： javascript angularjs angularjs-ng-repeat angular-filters datefilter

【解决方案1】：

试试这个，将字符串日期转换为日期，如过滤器中的第 3 行

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>

【讨论】：

您好，此解决方案有效，当我想在控制器中按日期检索年龄时使用此解决方案。但我不想要这个，我想在 ng-repeat 中按日期检索年龄。

【解决方案2】：

感谢 PixelBits at this question 提供的解决方案，我能够解决我的问题。以下是我的做法：

控制器：

$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) }}

谢谢大家！

【讨论】：