CODEWITHSUNDEEP
javascriptangularjsmomentjs
User_3535
User_3535

Reputation: 862

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

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.

Upvotes: 0

Views: 446

Answers (1)

daan.desmedt
daan.desmedt

Reputation: 3820

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

Upvotes: 1

Related Questions