Sortieren von Daten in AngularJS-Frontend

Question

Ich habe eine Tabelle mit ein paar Aufzeichnungen und deren Erstellungsdatum gerendert. Die $scope Daten sieht wie folgt aus:

$scope.data = [{ 
    "FeeId": "17", 
    "FirmName": "LAWFIRM1", 
    "countryId": "IN", 
    "filing": "REI-Reissue", 
    "agentFeeCode": "AGNT", 
    "feeType": "GOVT", 
    "Term": "Fixed", 
    "Amount": "150", 
    "comments": "test comment", 
    "startDate": "13-DEC-16" 
},{ 
    "FeeId": "18", 
    "FirmName": "LAWFIRM2", 
    "countryId": "IN", 
    "filing": "REI-Reissue", 
    "agentFeeCode": "AGNT", 
    "feeType": "GOVT", 
    "Term": "Open", 
    "Amount": "150", 
    "comments": "test comment", 
    "startDate": "11-DEC-16" 
}] 

Ich brauche ein AngularJS Frontend basierend auf der Sortierung von startDate. Es funktioniert derzeit nicht mit einem Datum in string Format.

Wie kann ich im Frontend mit AngularJS meine Daten nach startDate sortieren?

Answer 1

Während Ihr Datumsformat 13-DEC-16 ist üblich für die gemeinsame ISO-Dates ist es schwierig, dieses Datum zu analysieren. Auf diese Weise habe ich Ihr Format von 13-DEC-16 zu 13-12-16 geändert. Ich hoffe, Sie können Ihre API-Datenstruktur ändern. Nur ein Hinweis, es wäre eine schöne Verbesserung, wenn Sie ein ISO-Date-Format in Ihrer API verwenden. Andere Systeme/Sprachen könnten also auch mit diesem Datum umgehen.

Ich würde bevorzugen eine Lösung mit moment.js, die nette Helfer durch die Verwendung von Daten in JavaScript bietet. Sie müssen das Datum analysieren, um die korrekte Sortierung des Datums in AngularJS zu gewährleisten. Bis das können Sie AngularJS filterorderBy verwenden nach Datum in Ihrem Frontend zu sortieren:

//init scope data 
$scope.data = [ 
    { 
     "FeeId": "17", 
     "FirmName": "LAWFIRM1", 
     "countryId": "IN", 
     "filing": "REI-Reissue", 
     "agentFeeCode": "AGNT", 
     "feeType": "GOVT", 
     "Term": "Fixed", 
     "Amount": "150", 
     "comments": "test comment", 
     "startDate": "13-12-16" 
    },{ 
     "FeeId": "18", 
     "FirmName": "LAWFIRM12", 
     "countryId": "IN", 
     "filing": "REI-Reissue", 
     "agentFeeCode": "AGNT", 
     "feeType": "GOVT", 
     "Term": "Fixed", 
     "Amount": "150", 
     "comments": "test comment", 
     "startDate": "14-12-16" 
    },{ 
     "FeeId": "19", 
     "FirmName": "LAWFIRM12", 
     "countryId": "IN", 
     "filing": "REI-Reissue", 
     "agentFeeCode": "AGNT", 
     "feeType": "GOVT", 
     "Term": "Fixed", 
     "Amount": "150", 
     "comments": "test comment", 
     "startDate": "11-12-16" 
    } 
]; 

/** 
* Parse custom date format with moment js 
*/ 
angular.forEach($scope.data, function (item, key) { 
    $scope.data[key].startDate = new moment(item.startDate, "DD-MM-YY")._d; 
}); 

Answer 2

:

<div class="wrapper"> 
    <div ng-repeat="item in data|orderBy:'startDate'"> 
     {{ item }} 
    </div> 
</div> 

Ihr Controller wie folgt aussehen würde:

filter:orderBy(array, expression[, reverse]); 

Ihre Ansicht würde wie folgt aussehen

Verwenden Sie ein Konvertierungsobjekt zusammen mit substr und parseInt, um einen Teil der Datumszeichenkette beliebig zu vergleichen:

//Month conversion object 
 
var months = { 
 
    NOV: 11, 
 
    DEC: 12 
 
}; 
 
//Sort function 
 
function sortByDate(a, b) { 
 
    return (
 
     //Year 
 
     parseInt(a.startDate.substr(7, 2)) - parseInt(b.startDate.substr(7, 2)) || 
 
     //Month 
 
     months[a.startDate.substr(3, 3)] - months[b.startDate.substr(3, 3)] || 
 
     //Day 
 
     parseInt(a.startDate.substr(0, 2)) - parseInt(b.startDate.substr(0, 2))); 
 
    } 
 
    //The list to sort 
 
var list = [{ 
 
    "FeeId": "17", 
 
    "FirmName": "LAWFIRM1", 
 
    "countryId": "IN", 
 
    "filing": "REI-Reissue", 
 
    "agentFeeCode": "AGNT", 
 
    "feeType": "GOVT", 
 
    "Term": "Fixed", 
 
    "Amount": "150", 
 
    "comments": "test comment", 
 
    "startDate": "13-DEC-16" 
 
}, { 
 
    "FeeId": "17", 
 
    "FirmName": "LAWFIRM1", 
 
    "countryId": "IN", 
 
    "filing": "REI-Reissue", 
 
    "agentFeeCode": "AGNT", 
 
    "feeType": "GOVT", 
 
    "Term": "Fixed", 
 
    "Amount": "150", 
 
    "comments": "test comment", 
 
    "startDate": "13-NOV-16" 
 
}, { 
 
    "FeeId": "17", 
 
    "FirmName": "LAWFIRM1", 
 
    "countryId": "IN", 
 
    "filing": "REI-Reissue", 
 
    "agentFeeCode": "AGNT", 
 
    "feeType": "GOVT", 
 
    "Term": "Fixed", 
 
    "Amount": "150", 
 
    "comments": "test comment", 
 
    "startDate": "13-DEC-15" 
 
}, { 
 
    "FeeId": "17", 
 
    "FirmName": "LAWFIRM1", 
 
    "countryId": "IN", 
 
    "filing": "REI-Reissue", 
 
    "agentFeeCode": "AGNT", 
 
    "feeType": "GOVT", 
 
    "Term": "Fixed", 
 
    "Amount": "150", 
 
    "comments": "test comment", 
 
    "startDate": "13-NOV-16" 
 
}]; 
 
//Sorting the list 
 
console.log(list 
 
    .sort(sortByDate));

Answer 3

dieses Arbeits Demo:

var app = angular.module('myApp',[]); 
 
app.controller('myCtrl',function($scope) { 
 
$scope.jsonObj = [{ 
 
    "FeeId": "1", 
 
    "FirmName": "ABC", 
 
    "countryId": "IN", 
 
    "filing": "REI-Reissue", 
 
    "agentFeeCode": "AGNT", 
 
    "feeType": "GOVT", 
 
    "Term": "Fixed", 
 
    "Amount": "150", 
 
    "comments": "test comment", 
 
    "startDate": "13-DEC-16" 
 
}, 
 
{ 
 
    "FeeId": "2", 
 
    "FirmName": "XYZ", 
 
    "countryId": "IN", 
 
    "filing": "REI-Reissue", 
 
    "agentFeeCode": "AGNT", 
 
    "feeType": "GOVT", 
 
    "Term": "Fixed", 
 
    "Amount": "150", 
 
    "comments": "test comment", 
 
    "startDate": "13-NOV-16" 
 
}]; 
 

 
for(var i in $scope.jsonObj) { 
 
    $scope.jsonObj[i].startDate = Date.parse($scope.jsonObj[i].startDate); 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="myCtrl"> 
 
     <div ng-repeat="item in jsonObj | orderBy:'startDate'">{{item.FirmName}}: {{item.startDate | date}}</div> 
 
    </div> 
 
</div>