orderBy
中使用时, ng-repeat
功能无效
在这里,我想根据executedOn
我想对元素进行排序,最新日期应该反映在顶部。
有人可以帮助我
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.details = [
{
"id": 255463,
"orderId": 226433,
"status": 1,
"executedOn": "25/Sep/17",
"executedBy": "Person A",
"executedByDisplay": "Person A",
"cycleId": 4042,
"cycleName": "Cycle A",
"versionId": 21289,
"versionName": "Version A",
"issueKey": "A"
},
{
"id": 255433,
"orderId": 226403,
"status": 1,
"executedOn": "1/Mar/17",
"executedBy": "Person B",
"executedByDisplay": "Person B",
"cycleId": 4041,
"cycleName": "Cycle B",
"versionId": 21289,
"versionName": "Version A",
"issueKey": "B"
},
{
"id": 255432,
"orderId": 226402,
"status": 1,
"executedOn": "1/Apr/17",
"executedBy": "Person B",
"executedByDisplay": "Person B",
"cycleId": 4041,
"cycleName": "Cycle B",
"versionId": 21289,
"versionName": "Version A",
"issueKey": "C"
}
];
});
th, td {
border-bottom: 1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
<body ng-controller="MainCtrl">
<table class="table h6">
<thead>
<tr>
<th>#</th>
<th>Cycle Name</th>
<th>Execution Completed</th>
<th>Total Test Cases</th>
</tr>
</thead>
<tr ng-repeat="x in details | orderBy :'executedOn'">
<td>{{$index+1}}</td>
<td>{{x.cycleName}}</td>
<td>{{x.executedOn | date:'d-MMM-yy'}}</td>
<td>{{x.versionName}}</td>
</tr>
</table>
</body>
</html>
答案 0 :(得分:5)
如何将"executedOn"
转换为Date
对象:new Date("25/Sep/17"),
你可以这样做:
$scope.details.map(function(item){
item.executedOn = new Date(item.executedOn);
return item;
});
排序将正常运作
<tr ng-repeat="x in details | orderBy :'executedOn'">
<td>{{$index+1}}</td>
<td>{{x.cycleName}}</td>
<td>{{x.executedOn | date:'d-MMM-yy'}}</td>
<td>{{x.versionName}}</td>
</tr>
答案 1 :(得分:1)
您可以使用A getter函数作为orderBy表达式。将使用每个项作为参数调用此函数,并将返回值用于排序。 see details in demo
<强> JS 强>
$scope.makerightorder = function(x){
return new Date(x.executedOn);
}
显然使用true作为第二个参数来查看最新的
<强> HTML 强>
<tr ng-repeat="x in details | orderBy :makerightorder:true ">
<td>{{$index+1}}</td>
<td>{{x.cycleName}}</td>
<td>{{x.executedOn | date:'d-MMM-yy'}}</td>
<td>{{x.versionName}}</td>
</tr>