从JSON中的现有数据创建日期显示

时间:2016-04-24 15:49:40

标签: javascript angularjs json

我已经创建了一个可以提前几天创建的控制器

$http.get('js/data.json')
    .success(function(data) {
      $scope.events = data.events;
      $scope.nextDates = [];
          for (i = 0; i <= 2; i++) {
            // Locked the start date for this example
            var d = new Date('2016.04.24 23:14:13'); 
            $scope.nextDates.push(d.setDate(d.getDate() + i));
          }
     });

然后我有一个包含一些计划事件的JSON文件

{
  "events": [
              { "name": "Monday Bloody Monday",
                "dates": ["Mon Apr 25 2016 00:00:00 GMT+0200 (CEST)"]
              },
              { "name": "Hard Work",
                "dates": ["Mon Apr 25 2016 00:00:00 GMT+0200 (CEST)",
                          "Tue Apr 26 2016 00:00:00 GMT+0200 (CEST)",
                          "Wed Apr 27 2016 00:00:00 GMT+0200 (CEST)",
                          "Thu Apr 28 2016 00:00:00 GMT+0200 (CEST)",
                          "Fri Apr 29 2016 00:00:00 GMT+0200 (CEST)"
                         ]
              }
             ]  
}

(不确定字符串是否是存储日期的最佳方式..认为perphaps unix的环氧树脂数量会更好)

我没有运气试过以下

<div ng-repeat="day in nextdates">
  <h2>{{day | amDateFormat:'dddd, Do MMMM YYYY'}}</h2>

  <div ng-repeat="event in events">
    <div ng-repeat="date in event.dates"
         ng-show="{ day.diff(Date(date)) < 0 }">
      <p>{{event.name}}</p>    
    </div>
  </div>
</div>

BTW:我注入了角度矩(amDateFormat)以帮助人类读取输出

如何比较日期以查看它是否在同一天然后显示?

输出应该是这样的

2016年4月25日星期一

星期一血腥星期一

努力工作

2016年4月26日星期二

努力工作

2016年4月27日星期三

努力工作

2016年4月28日星期四

努力工作

2016年4月29日星期五

努力工作

也许我应该把控制器中的逻辑保留下来......

1 个答案:

答案 0 :(得分:1)

希望您在我们进行js开发时使用Underscore.js非常自然的api选择。希望这对您有所帮助。

<强> JS

$scope.filteredEvents=[];

  _.each(nextdates, function (d) {
   _.each(events, function (e) {
   _.each(e.dates, function (dt) {
        var difference = moment(d) - moment(dt);
        if (difference == 0) {
           $scope.filteredEvents.push(e);
        } 
     });
   });
  });

<强> HTML

<div ng-repeat="day in nextdates">
  <h2>{{day | amDateFormat:'dddd, Do MMMM YYYY'}}</h2>

  <div ng-repeat="event in filteredEvents">
     <p>{{event.name}}</p>    
  </div>
</div>