AngularJS中日期表格列排序问题

Question

AngularJS中日期表格列排序问题

3

我在表头排序日期字段时遇到了一些问题。对于字符串和数字，排序正常工作。我已经阅读了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>

这是基于字符串而不是日期的工作原理。感谢您的帮助。

- user2877882

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cyril Gandon · Accepted Answer

您的日期是由字符串模拟的，因此应用的排序是按照字符串处理。

如果您希望日期按照日期的方式排序，那么您需要将字符串转换为日期对象。

不要忘记进行这个转换。

"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 https://dev59.com/PW035IYBdhLWcg3wHsKR
"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>