AngularJs'de tarihe göre sıralama filtresi

139

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

Kitap dinlenme api'den geliyor ve birçok okuyucu bağlı. 'Son' okuyucuyu almak istiyorum.

created_atAlan son olarak tanımlayan bir değere sahiptir. Ama yukarıdaki kod bana en eski okuyucuyu veriyor. Yani siparişin tersine çevrilmesi mi gerekiyor? Sıralamaları azalan sırada yapmanın bir yolu var mı?

angularjs angularjs-filter

— Oyla
kaynak

219

Belgelere göre reverseargümanı kullanabilirsiniz .

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

Filtrenizi şu şekilde değiştirin:

orderBy: 'created_at':true

— CD..
kaynak

21

Bunun :virgül olmadığını unutmayın . (Diğer gözlemci olmayan kişiler için)

— ReactiveRaven

1

Bir sıralama düğmesi istiyorsanız true öğesini sortDirection ile değiştirebilirsiniz. Ardından kapsamınızda $ scope.sortDirection = true değerini ayarlayın. Tıklama düğmesi ng-click = "sortDirection =! SortDirection" gibi

— görünecektir

1

Bunlar sadece tek bir sayfada tam tablo verisi olan sayfa için çalışıyor, ancak sayfalandırma için çalışmayacak ..

— ANK

belgelere bağlantı koptu

— robert

180

orderByArtan sıra yerine artan argümanın olması için argümanın önüne '-' ekleyebilirsiniz. Ben şöyle yazarım:

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

Bu aynı zamanda filtre siparişi dokümantasyonunda da belirtilmiştir .

— Ludwig Magnusson
kaynak

6

Teşekkür ederim, bu siparişi tersine çevirmenin güzel ve hızlı bir yoludur.

— LukeP

41

Belki de bu birisi için yararlı olabilir:

Benim durumumda, her biri Mongoose tarafından belirlenen bir tarih içeren bir dizi nesne alıyordum.

Kullandım:

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

Ve işlevi tanımladı:

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

Bu benim için çalıştı.

— igorauad
kaynak

1

Teşekkür ederim. Tarihim bir MMMM dd, YYYY biçiminde girilen dizelerdi ve bir tarih nesnesi oluşturan bir yöntem kullanmadıkça bunları doğru şekilde sıralamak için nasıl açısal elde edemedim. Bir cazibe gibi çalıştı.

— Zargoon

Bu doğru yöntemdir ... bu yöntemi herhangi bir tarih biçiminde kullanabiliriz .. teşekkürler patron

— Jethik

17

Ve bir kod örneği:

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

Ve JavaScript:

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

Sana vereceğim:

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

JSFiddle'da: http://jsfiddle.net/agjqN/

— Niels Bom
kaynak

7

Azalan Tarihe göre sırala

Tarihli kayıtların azalan sırada filtrelenmesine yardımcı olacaktır.

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

— Dinesh Vaitage
kaynak

2

Benim durumumda, orderBy bir seçim kutusu tarafından belirlenir. Ludwig'in yanıtını tercih ederim, çünkü seçim seçeneklerinde sıralama yönünü şu şekilde ayarlayabilirsiniz:

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

biçimlendirme:

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

— Michael
kaynak

1

bu özel sıralama işlevleriyle çalışmıyor gibi görünüyor. Özel bir orderBy işlevi kullanırken ve örneğin bir <select> öğesinden sipariş vermek için bir parametre seçerken sıralamayı tersine çevirmenin bir yolu var mı?

— cre8value

0

w3schools örneklerine bakın: https://www.w3schools.com/angular/angular_filters.asp https://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby_click

ardından "geri" bayrağını ekleyin:

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

— ccampisano
kaynak

0

Benim tavsiye kullanım moment () dizeler değerleri ise tarihleri yönetmek kolaydır

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

— pabloRN
kaynak

0

var myApp = angular.module('myApp', []);

myApp.filter("toArray", function () {
    return function (obj) {
        var result = [];
        angular.forEach(obj, function (val, key) {
            result.push(val);
        });
        return result;
    };
});


myApp.controller("mainCtrl", function ($scope) {

  $scope.logData = [
              { event: 'Payment', created_at: '10/10/2019 6:47 PM PST' },
              { event: 'Payment', created_at: '20/10/2019 12:47 AM PST' },
              { event: 'Payment', created_at: '30/10/2019 1:50 PM PST' }
          ]; 
        
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

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

  <h4>Descending</h4>
  <ul>
    <li ng-repeat="logs in logData | toArray | orderBy:'created_at':true" >
          {{logs.event}} - Date : {{logs.created_at}}
    </li>
  </ul>
  
  <br>
  
  
  <h4>Ascending</h4>
  <ul>
    <li ng-repeat="logs in logData | toArray | orderBy:'created_at':false" >
          {{logs.event}} - Date : {{logs.created_at}}
    </li>
  </ul>
  
</div>

Snippet'i genişlet

— Abdo-Sunucu
kaynak