CODEWITHSUNDEEP
jqueryangularjssorting
Naren-Mehta
Naren-Mehta

Reputation: 317

How to sort time in angularjs

I have a list. In every list item I have a timeSlot. It could be like "12-1PM" , "1-2PM, 2-3PM, 3-4PM".

     <table> 
       <tr ng-repeat="item in itemList | orderBy: slots">
           <td>{{item.name}}</td>
           <td>{{item.quentity}}</td>
           <td>{{item.timeSlot}}<td>  <!-- time slot coming from API call are like "12-1PM" ,  "1-2PM, 2-3PM, 3-4PM" -->
       </tr>
    </table>

When I am going to sort the table according to the time slot then it is giving me the sorted table like "1-2PM", "12-1PM" , "2-3PM","3-4PM" .It is wrong. I want sorted items with slotTime will be come like "12-1PM" will be the first , "1-2PM" will be the second than "2-3PM","3-4PM".

I can't change APT return time slot. I don't know how to sort this. Any Idea ?

Upvotes: 0

Views: 757

Answers (3)

Arno_Geismar
Arno_Geismar

Reputation: 2330

Updated my original answer to fit your specific needs :

since your timeslots are strings you will need to perform some type of sorting yourself. orderBy can sort your array depending on a property of the object that your array contains, since we are working with strings this will not do the trick and will need some love before we can achieve what you want. What I am doing here is doing a manual sort depending on the index of what I know is the correct order, and adding a property to the objects in my array so that I can then use the orderBy filter with predicate 'timeslotOrder' wich I have added myself and which is a Number. Now orderBy can arrange them from low to high or if you want reverse you can do '-timeslotOrder' as a predicate

var myApp = angular.module('myApp', []);


angular.module('myApp').controller("MyCtrl",function($scope) {
    $scope.timeSlots = [
        "12-1PM",
        "1-2PM",
        "2-3PM",
        "3-4PM",
        "4-5PM",
        "6-7PM",
        "8-9PM "
  ];

    $scope.fetchedItems = [
        {name:"test", quantity:5, timeslot: "12-1PM"},
        {name:"test2", quantity:5, timeslot: "1-2PM"}, 
        {name:"test", quantity:5, timeslot: "3-4PM"},
        {name:"test", quantity:5, timeslot: "2-3PM"}
    ]; 

    $scope.sortFunction = function() {
        var sortedArray = [];
        for(var i = 0; i < $scope.fetchedItems.length; i++) {
        var index = $scope.timeSlots.indexOf($scope.fetchedItems[i].timeslot);
        $scope.fetchedItems[i].timeslotOrder = index;    
        };
    }
    $scope.sortFunction();


})

and then in html: 

<div ng-controller="MyCtrl">
    <ul ng-repeat="item in fetchedItems | orderBy: 'timeslotOrder'">
        <li>{{item.timeslot}}</li>
    </ul>
</div>

working jsfiddle: Updated Fiddle

Upvotes: 1

Nagarjuna Reddy
Nagarjuna Reddy

Reputation: 4195

Try this:

1)

<td><a href="" ng-click="predicate = 'timeSlot'; reverse=!reverse">Time Slot<span ng-show="predicate == 'timeSlot'"></a></td>

OR

2) HTML :

<a ng-click="sortBy('timeSlot')" href="" style="text-decoration: none;"> Time Slot</a>

Script :

 $scope.sortBy = function(property) {

        $scope.predicate = property;
        $scope.reverse = !$scope.reverse;
   }

Upvotes: 0

Nagesh Sanika
Nagesh Sanika

Reputation: 1100

add this in controller

    $scope.predicate = 'timeSlot';
    $scope.reverse = false;
    $scope.order = function(predicate) {
        $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
        $scope.predicate = predicate;
    };

and change your ng-repeat like this

    <tr ng-repeat="item in itemList | orderBy:predicate:reverse">

hope it will work.

Upvotes: 0

Related Questions