Question

我有一个带有假日信息列表的json文件，我想将今天的日期与列表进行比较，并显示下一个即将到来的假期。

如何执行以下操作？

格式化今天与假日json比较的日期
查找下一个假日，显示其名称和日期

HTML显示

<p>Next holiday is {{holiday.name}} on {{holiday.date}}</p>

Holiday Json

[
  {
    "name": "Christmas Eve",
    "country": "US",
    "date": "2015-12-24"
  },
  {
    "name": "Christmas",
    "country": "US",
    "date": "2015-12-25"
  },
  {
    "name": "First Day of Kwanzaa",
    "country": "US",
    "date": "2015-12-26"
  },
  {
    "name": "Second Day of Kwanzaa",
    "country": "US",
    "date": "2015-12-27"
  }
]

Answer 1

这是一个功能。使用holidays数组调用它。

function getNextHoliday(holidays){

   //Create date with today
   var today = new Date();       

   //Iterate the holiday array in the scope 
   for (idx in holidays) {

      //Create date variable for each holiday
      var holiday = new Date(holidays[idx].date);

      //Compare
      if (holiday > today)
          return holidays[idx].name + " on " + holidays[idx].date;  
   }    

}

Answer 2

另一种选择是使用如下的自定义指令。

MyDirectives.directive("drHoliday", function() {
    return {
        replace: true,
        restrict: 'A',
        scope: false, //default
        link: function(scope, element, attrs) {

            items = scope.holidays.filter(function(item) {
                var d1 = new Date();
                var d2 = new Date(item.date);
                return d2 > d1;
            });
            console.dir(items);

            element.html('<p>Next holiday is ' + items[0].name + ' on ' + items[0].date + ' </p>');
        }
    }
});

标记将如下所示。

<div dr-holiday></div>

可以找到工作小提琴here。

如果你不在服务器端代码中处理相同的事情，你甚至可以按日期对过滤后的数组进行排序，以确保项目[0]是你期望的日期。

items.sort(function(a,b){
  return new Date(b.date) - new Date(a.date);
});

Answer 3

这是一个JSfiddle http://jsfiddle.net/user2314737/c6BfQ/277/

我使用了两个过滤器：一个用于选择大于今天日期的日期，另一个用于仅显示第一个此类项<tr ng:repeat="data in data | filter:dateFilter|limitTo:1">

＆＃13;

function dateCtrl($scope) {
    $scope.dateFilter = function ($scope) {
        var d = new Date();
        var curr_date = d.getDate();
        var curr_month = d.getMonth() + 1;
        var curr_year = d.getFullYear();
        var today = curr_year + "-" + curr_month + "-" + curr_date;
        return (Date.parse($scope.date) > Date.parse(today));
    }

    $scope.data = [{
        "name": "Christmas Eve Last Year",
            "country": "US",
            "date": "2014-12-24"
    }, {
        "name": "Christmas",
            "country": "US",
            "date": "2015-12-25"
    }, {
        "name": "First Day of Kwanzaa",
            "country": "US",
            "date": "2015-12-26"
    }, {
        "name": "Second Day of Kwanzaa",
            "country": "US",
            "date": "2015-12-27"
    }];

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng:app>
<div ng:controller="dateCtrl">What's the next holiday?
    <table class="table">
        <tr>
            <th>name</th>
            <th>country</th>
            <th>date</th>
        </tr>
        <tr ng:repeat="data in data | filter:dateFilter|limitTo:1">
            <td>{{data.name}}</td>
            <td>{{data.country}}</td>
            <td>{{data.date}}</td>
        </tr>
    </table>
</div>
  </body>

＆＃13;

比较日期并从角度js中的数组中选择下一个值

3 个答案: