web-dev-qa-db-ja.com

AngularJsの日付フィルタによる降順

<div class="recent" ng-repeat="reader in
    (filteredItems = (book.reader | orderBy: 'created_at' | limitTo: 1))">
</div>

それで、本は残りのapiから来て、それは添付された多くの読者を持っています。最近の読者になりたい。

created_atフィールドは、最近のユーザーを識別する値を持ちます。しかし、上記のコードは私に最も古い読者を与えます。順序を逆にする必要がありますか？ソートを降順にする方法はありますか。

angularjsangularjs-filter
130
Artjom Zabelin

のドキュメント によれば、reverse引数を使用できます。

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

フィルタを次のように変更します。

orderBy: 'created_at':true
209
CD..

昇順ではなく降順にするには、orderByの引数の前に ' - 'を付けます。私はこのように書くでしょう：

<div class="recent" 
   ng-repeat="reader in book.reader | orderBy: '-created_at' | limitTo: 1">
</div>

これは、フィルタ orderBy のドキュメントにも記載されています。

174
Ludwig Magnusson

おそらくこれは誰かに役立つでしょう：

私の場合は、Mongooseによって設定された日付をそれぞれ含むオブジェクトの配列を取得していました。

私は使った：

ng-repeat="comment in post.comments | orderBy : sortComment : true"

そして関数を定義しました：

$scope.sortComment = function(comment) {
    var date = new Date(comment.created);
    return date;
};

これは私のために働きました。

41
igorauad

そしてコード例：

<div ng-app>
    <div ng-controller="FooController">
        <ul ng-repeat="item in items | orderBy:'num':true">
            <li>{{item.num}} :: {{item.desc}}</li>
        </ul>
    </div>
</div>

そしてJavaScript

function FooController($scope) {
    $scope.items = [
        {desc: 'a', num: 1},
        {desc: 'b', num: 2},
        {desc: 'c', num: 3},
    ];
}

あなたにあげるでしょう：

3 :: c
2 :: b
1 :: a

JSFiddleについて： http://jsfiddle.net/agjqN/

17
Niels Bom

降順で並べ替えます

降順で日付でレコードをフィルタするのに役立ちます。

$scope.logData = [
            { event: 'Payment', created_at: '04/05/17 6:47 PM PST' },
            { event: 'Payment', created_at: '04/06/17 12:47 AM PST' },
            { event: 'Payment', created_at: '04/05/17 1:50 PM PST' }
        ]; 

<div ng-repeat="logs in logData | orderBy: '-created_at'" >
      {{logs.event}}
 </div>
7
Dinesh Vaitage

私の場合、orderByは選択ボックスによって決まります。次のようにselectオプションでソート方向を設定できるので、Ludwigの回答が好きです。

        $scope.options = [
            { label: 'Title', value: 'title' },
            { label: 'Newest', value: '-publish_date' },
            { label: 'Featured', value: '-featured' }
        ];

マークアップ：

<select ng-model="orderProp" ng-options="opt as opt.label for opt in options"></select>
<ul>
    <li ng-repeat="item in items | orderBy:orderProp.value"></li>
</ul>
2
Michael

私がお勧めするmoment（）は文字列値であれば簡単に管理できます

//controller
$scope.sortBooks = function (reader) {
            var date = moment(reader.endDate, 'DD-MM-YYYY');
            return date;
        };

//template

ng-repeat="reader in book.reader | orderBy : sortBooks : true"
0
pabloRN

w3schoolsのサンプルをご覧ください。 https://www.w3schools.com/angular/angular_filters.asphttps：// www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby_click

それから "reverse"フラグを追加します。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<p>Click the table headers to change the sorting order:</p>

<div ng-app="myApp" ng-controller="namesCtrl">

<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy:reverse">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Carl',country:'Sweden'},
        {name:'Margareth',country:'England'},
        {name:'Hege',country:'Norway'},
        {name:'Joe',country:'Denmark'},
        {name:'Gustav',country:'Sweden'},
        {name:'Birgit',country:'Denmark'},
        {name:'Mary',country:'England'},
        {name:'Kai',country:'Norway'}
        ];

    $scope.reverse=false;
    $scope.orderByMe = function(x) {

        if($scope.myOrderBy == x) {
            $scope.reverse=!$scope.reverse;
        }
        $scope.myOrderBy = x;
    }
});
</script>

</body>
</html>
0
ccampisano