AngularJSフロントエンドの日付の並べ替え

Question

私はいくつかのレコードとその作成日でレンダリングされたテーブルを持っています。 $scopeデータは次のようになります。

$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" 
}] 

私はstartDateでのソートベースAngularJSフロントエンドを必要とします。現在、string形式の日付では機能していません。

AngularJSを使用してフロントエンドでstartDateでデータを並べ替えるにはどうすればよいですか？

Answer 1

日付の形式13-DEC-16は一般的なISO-Datesのカスタムであり、その日付を解析するのは難しいですが。こうして私はあなたのフォーマットを13-DEC-16から13-12-16に変更しました。 APIデータ構造を変更できることを願っています。あなたのAPIの中でISO-Dateフォーマットを使用しているならば、ちょっとしたヒントかもしれません。だから、他のシステム/言語もその日付を扱うことができます。

私はmoment.jsを使用して解決策を選ぶでしょう。これはJavaScriptで日付を使用することで素晴らしいヘルパーを提供します。 AngularJSで日付のソートが正しく行われるように、日付を解析する必要があります。それまでは、あなたのフロントエンドで日付でソートするAngularJS filterorderByを使用することができます。

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

あなたのビューは次のようになります。

//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> 

お使いのコントローラがこのように見えるだろう

substrとparseIntの変換オブジェクトを使用して、日付文字列の一部を比較してください：

//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

この作業のデモ試してみてください：

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>