How to sort on time property using Angular.js and ngRepeat

Question

This is my sample data

  {
    "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"
        }]
    }]
}

I want to show the above data sorted on the time (UTC format) property using angular.js.

I have tried using moment.js but can't figure it out.

What you have tried so far? Show the code.

Sai
– Sai

2017-06-12 08:01:20 +00:00
Commented Jun 12, 2017 at 8:01 — Sai
– Sai, Commented Jun 12, 2017 at 8:01
Check MomentJS library momentjs.com/docs

michelem
– michelem

2017-06-12 08:08:34 +00:00
Commented Jun 12, 2017 at 8:08 — michelem
– michelem, Commented Jun 12, 2017 at 8:08
Is your time data instance of Date object ?

Burak Akyıldız
– Burak Akyıldız

2017-06-12 08:10:17 +00:00
Commented Jun 12, 2017 at 8:10 — Burak Akyıldız
– Burak Akyıldız, Commented Jun 12, 2017 at 8:10

daan.desmedt · Accepted Answer · 2017-06-12 08:15:56Z

1

Use moment('11/06/2017 11:00').format("DD-MM-YYYY HH:mm") to format your Date Strings to Date objects using Moment.js.

To sort your results make use of the orderBy option of the ngRepeat directive (or provide a custom filter if deeper filtering is needed):

{{ array | orderBy : expression}}

View

<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>

Or sort reverse by using -:

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

Controller

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

answered Jun 12, 2017 at 8:15

daan.desmedt

3,8201 gold badge22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

User_3535 Over a year ago

but my date are of coming in this format

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

can"t able to do orderby

Collectives™ on Stack Overflow

How to sort on time property using Angular.js and ngRepeat

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related