Ionic AngularJS按日期划分事件

Ionic AngularJS splitting up events by date

本文关键字：划分 事件 日期 AngularJS Ionic      更新时间：2024-05-02

我目前正在从Google Calendar中提取事件并将其显示在屏幕上，这是html:

<div class="list card" data-ng-repeat="x in items">
 <div class="item item-avatar">
    <img src="image.jpg">
    <h2>{{x.summary}}</h2>
    <p>{{x.ncreated}}</p>
  </div>
  <div class="item item-body">
    <p>
     {{x.description}}
    </p>
    <p>
</div>

ncreated是约会的日期和时间。我想做的是为每一天添加一些html，所以当今天的日期匹配时，我想要一个带有一些文本的间隔符，上面写着TODAY APPOINTMENTS，然后是TOMMOROW、NEXT WEEK和MONTH。

我发现很难弄清楚如何根据日期推送这个html，你在哪里做逻辑，它如何影响html？不确定这是否相关，但以下是控制器中的片段：

for (a=0;a<$scope.items.length;a++){
        //crt=$scope.items[a].created;
        if($scope.items[a].status == "confirmed"){
            console.log($scope.items[a].status);
        crt=$scope.items[a].start.dateTime;
        svals=crt.split("T");
        dvals=svals[0].split("-");
        tvals=svals[1].split(":");
        ncreated=dvals[2]+"/"+dvals[1]+"/"+dvals[0];
        ncreated+=" "+tvals[0]+":"+tvals[1];
        $scope.items[a].ncreated=ncreated;
        }
    }

您可以在控制器中添加一个以日期为参数的函数调用。它是这样的：

<div class="list card" data-ng-repeat="x in items">
 <div class="item item-avatar">
    <img src="image.jpg">
    <h2>{{x.summary}}</h2>
    <p>{{x.ncreated}}{{addSomeHtml(x.ncreated)}}</p>
  </div>
  <div class="item item-body">
    <p>
     {{x.description}}
    </p>
    <p>
</div>

在您的控制器中，将函数添加到$scope:

$scope.addSomeHtml = function(date){
}

要在日期之间进行比较，最简单的方法是使用Moment.js.

相关文章：