Angular js中的日期表列排序问题

Question

我在对表格标题中的日期字段进行排序时遇到了一些问题。排序 id 对字符串和数字正常工作。我已经通过http://jsfiddle.net/poppypoop/2463hsvd/。我替换了我的 json 并进行了测试。这也是基于字符串的。

JS代码：

<script>
    var myApp = angular.module("myApp",[]);
    function myCtrl($scope){
        $scope.descending = false;
        $scope.columnToOrderBy = 'date';
        $scope.data = [
           {  
          "defaultWH":"5",
          "flowRouteName":"HIGH RISK",
          "startDate":"01/03/2016",
          "endDate":"23/03/2016",
          "hiddenStartDate":1456837200000,
          "commodityCode":"100042110",
          "commodityId":8,
          "stockingPointId":5
       },
       {  
          "defaultWH":"8",
          "flowRouteName":"HIGH RISK",
          "startDate":"25/04/2016",
          "endDate":"27/04/2016",
          "hiddenStartDate":1459864800000,
          "commodityCode":"100042110",
          "commodityId":8,
          "stockingPointId":8
       },
       {  
          "defaultWH":"8",
          "flowRouteName":"HIGH RISK",
          "startDate":"04/03/2018",
          "endDate":"20/03/2018",
          "hiddenStartDate":1520101800000,
          "commodityCode":"100042110",
          "commodityId":8,
          "stockingPointId":8
       }
        ];  
    }

</script>

HTML代码：

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <table cellspacing="0" cellpadding="5" border="2">
            <tr>
                <th ng-click=" columnToOrderBy ='startDate'; descending = !descending">
                    Date
                </th>
                <th ng-click=" columnToOrderBy ='Location'; descending = !descending">
                    Location
                </th>
            </tr>
            <tr ng-repeat="item in data | orderBy:columnToOrderBy:descending">
                <td><div ng-bind="item.startDate">       </div></td>
                <td><div ng-bind="item.flowRouteName">           </div></td>
            </tr>
        </table>
    </div>
</div>

这是基于字符串而不是日期的基础。感谢您的帮助。

Answer 1

您的日期是由字符串建模的，因此应用的顺序就像日期是字符串一样。

如果您希望日期像日期一样被排序，那么您必须将字符串转换为Date object。

没有

"startDate": "01/03/2016",

但是

// I let you deal with localizing your dates correctly
// Here it represents the 3rd of January (m/d/y)
// But I guess you want the 1st of March (d/m/y)
// see this post for help http://stackoverflow.com/questions/5619202/converting-string-to-date-in-js
"startDate": new Date("01/03/2016"), 

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

function myCtrl($scope) {
  $scope.descending = false;
  $scope.columnToOrderBy = 'date';
  $scope.data = [{
    "defaultWH": "5",
    "flowRouteName": "HIGH RISK",
    "startDate": new Date("01/03/2016"),
    "endDate": "23/03/2016",
    "hiddenStartDate": 1456837200000,
    "commodityCode": "100042110",
    "commodityId": 8,
    "stockingPointId": 5
  }, {
    "defaultWH": "8",
    "flowRouteName": "HIGH RISK",
    "startDate": new Date("05/04/2016"),
    "endDate": "27/04/2016",
    "hiddenStartDate": 1459864800000,
    "commodityCode": "100042110",
    "commodityId": 8,
    "stockingPointId": 8
  }, {
    "defaultWH": "8",
    "flowRouteName": "HIGH RISK",
    "startDate": new Date("04/03/2018"),
    "endDate": "20/03/2018",
    "hiddenStartDate": 1520101800000,
    "commodityCode": "100042110",
    "commodityId": 8,
    "stockingPointId": 8
  }];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <table cellspacing="0" cellpadding="5" border="2">
      <tr>
        <th ng-click=" columnToOrderBy ='startDate'; descending = !descending">
          Date
        </th>
        <th ng-click=" columnToOrderBy ='Location'; descending = !descending">
          Location
        </th>
      </tr>
      <tr ng-repeat="item in data | orderBy:columnToOrderBy:descending">
        <td>
          <div ng-bind="item.startDate | date"></div>
        </td>
        <td>
          <div ng-bind="item.flowRouteName"></div>
        </td>
      </tr>
    </table>
  </div>
</div>