如何使用 Angular.js 和 ngRepeat 按时间属性排序

Question

这是我的示例数据

  {
    "day": "Sunday",
    "count": [{
        "desc": "sunday one event"
    }, {
        "j": [{
            "start": "11:00 pm"
        }, {
            "end": "11:51 pm"
        }]
    }, {
        "desc": "sunday second event"
    }, {
        "j": [{
            "start": "12:00 am"
        }, {
            "end": "12:06 am"
        }]
    }]
}

我想显示使用角度.js按时间(UTC 格式(属性排序的上述数据。

我试过使用moment.js但无法弄清楚。

Answer 1

使用

moment('11/06/2017 11:00').format("DD-MM-YYYY HH:mm") 将日期字符串格式化为 Date 对象，使用 Moment.js 。

要对结果进行排序，请使用 ngRepeat 指令的orderBy选项(如果需要更深入的过滤，请提供自定义filter(：

{{ array | orderBy : expression}}

视图

<div ng-app="app" ng-controller="DateController as vm">
  <b>Events</b>
  <div ng-repeat="ev in vm.events | orderBy: 'date' ">
    {{::ev.name}} - {{::ev.date}}
  </div>
</div>

或者使用 - 反向排序：

<div ng-repeat="ev in vm.events | orderBy: '-date' ">

控制器

angular
  .module('app', [])
    .controller('DateController', DateController)
function DateController($scope) {
  var vm = this;
  vm.events = [
    {
        "name" : "sunday first event", 
      "date" : moment('11/06/2017 11:00').format("DD-MM-YYYY HH:mm")
    },
    {
        "name" : "sunday third event", 
      "date" : moment('11/06/2017 16:00').format("DD-MM-YYYY HH:mm")
    },
    {
        "name" : "sunday late event", 
      "date" : moment('11/06/2017 21:00').format("DD-MM-YYYY HH:mm")
    },
    {
        "name" : "sunday second event", 
      "date" : moment('11/06/2017 12:00').format("DD-MM-YYYY HH:mm")
    }    
  ];
}

JSFiddle