如何使用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"
        }]
    }]
}

我想顯示以上使用angular.js在時間（UTC格式）屬性上排序的數據。

我嘗試使用moment.js但無法弄清楚。

Answer 1

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

要對結果進行排序，請使用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