如何在angularjs中排序时间

Question

我有一个清单。在每个列表项中，我都有一个timeSlot。它可以是“12-1 4PM”，“1-2 4PM，2-3 4PM，3-4 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>

当我打算根据时间段对表进行排序时，它会给出“1-2 4PM”、“12-1 4PM”、“2-3 4PM”、“3-4 4PM”之类的排序表.It是错误的。我想排序的项目与slotTime将来像“12-1 3PM”将是第一，“1-2 3PM”将是第二个比“2-3 3PM”，“3-4 3PM”。

我不能更改退货时间。我不知道该怎么解决这个问题。有什么想法吗？

Answer 1

更新了我的原始答案，以满足您的特定需求：

由于您的时隙是字符串，因此您需要自己执行某种类型的排序。orderBy可以根据数组包含的对象的属性对数组进行排序，因为我们使用的是字符串，这不会起到作用，并且需要一些帮助才能实现您想要的结果。我在这里做的是根据我知道的正确顺序的索引进行手动排序，并向数组中的对象添加一个属性，这样我就可以使用带有谓词'timeslotOrder‘的orderBy过滤器，其中我自己添加了一个数字。现在orderBy可以将它们从低到高排列，或者如果你想颠倒顺序，你可以使用'-timeslotOrder‘作为谓词

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();


})

然后在html中：

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

工作jsfiddle：Updated Fiddle

Answer 2

将此添加到控制器中

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

并像这样更改您的ng-repeat

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

希望它能起作用。

Answer 3

试试这个：

1)

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

或

2) HTML :

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

脚本:

 $scope.sortBy = function(property) {

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