角度 js 中的日期表列排序问题
Date table column sort issue in angular js
我在对表头中的日期字段进行排序时遇到了一些问题。排序 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>
网页代码:
<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>
这是基于字符串而不是日期的基础。感谢您的帮助。
您的日期由字符串建模,因此应用的顺序就像日期是字符串一样。
如果您希望日期像日期一样排序,则必须将字符串转换为Date对象。
不
"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>
相关文章:
- 应用了转换时的D3js排序问题
- 循环的JavaScript排序问题
- 动态填充表时突出显示和排序问题
- 角度 js 中的日期表列排序问题
- 具有排序问题的流体动态图像布局
- JavaScript网格按编号排序,排序问题
- jQuery 数据表排序问题
- javascript 冒泡排序问题(可能很容易)
- 表排序问题
- jQuery 可排序问题开/关检查
- 空引导列上的 Jquery 可排序问题
- onclick()和onblur()排序问题
- 最新JQ Grid中的排序问题
- Typescript编译排序问题
- JavaScript稳定排序问题
- jqgrid中的排序问题
- Dgrid自定义排序问题
- 数据表中的columnfilterwidget过滤器排序问题
- SlickGrid选择排序问题
- Javascript数组排序问题