Urutan menurun berdasarkan filter tanggal di AngularJs

139

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

Jadi buku itu berasal dari api sisanya dan memiliki banyak pembaca terlampir. Saya ingin mendapatkan pembaca 'terkini'.

The created_atlapangan memiliki nilai yang mengidentifikasi pengguna sebagai baru-baru ini. Tetapi kode di atas memberi saya pembaca tertua. Jadi pesanan perlu terbalik? Apakah ada cara untuk menyortir dalam urutan menurun?

angularjs angularjs-filter

— Suara positif
sumber

219

Menurut dokumentasi Anda dapat menggunakan reverseargumen.

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

Ubah filter Anda ke:

orderBy: 'created_at':true

— CD..
sumber

21

Perhatikan ini :bukan koma. (Untuk orang yang tidak patuh)

— ReactiveRaven

1

Jika Anda menginginkan tombol sortir, Anda dapat mengganti true dengan sortDirection. Kemudian dalam lingkup Anda set $ scope.sortDirection = true. Tombol klik akan terlihat seperti ng-klik = "sortDirection =! SortDirection"

— mbokil

1

Ini hanya berfungsi untuk halaman yang memiliki data tabel lengkap dalam satu halaman, tetapi itu tidak akan berfungsi untuk pagination ..

— ANK

tautan ke dokumentasi rusak

— robert

180

Anda bisa mengawali argumen orderBydengan '-' agar pesanan menurun, bukan naik. Saya akan menulis seperti ini:

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

Ini juga dinyatakan dalam dokumentasi untuk filter orderBy .

— Ludwig Magnusson
sumber

6

Terima kasih, ini cara cepat dan mudah yang bagus untuk membalik urutan.

— LukeP

41

Mungkin ini bisa bermanfaat bagi seseorang:

Dalam kasus saya, saya mendapatkan berbagai objek, masing-masing berisi tanggal yang ditetapkan oleh Mongoose.

Saya menggunakan:

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

Dan mendefinisikan fungsinya:

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

Ini berhasil untuk saya.

— igorauad
sumber

1

Terima kasih. String tanggal saya dimasukkan dalam MMMM dd, format YYYY, dan saya tidak tahu cara mendapatkan sudut untuk mengurutkannya dengan benar kecuali saya menggunakan metode yang membangun objek tanggal. Bekerja seperti pesona.

— Zargoon

Ini adalah metode yang benar .. kita dapat menggunakan metode ini dalam format tanggal apa pun .. terima kasih bos

— Jethik

17

Dan contoh kode:

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

Dan JavaScript:

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

Akan memberimu:

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

Di JSFiddle: http://jsfiddle.net/agjqN/

— Niels Bom
sumber

7

Descending Sortir menurut tanggal

Ini akan membantu untuk memfilter catatan dengan tanggal dalam urutan menurun.

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

2

Dalam kasus saya, orderBy ditentukan oleh kotak pilih. Saya lebih suka tanggapan Ludwig karena Anda dapat mengatur arah pengurutan di opsi pilih seperti:

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

markup:

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

1

ini tampaknya tidak berfungsi dengan fungsi penyortiran khusus. Apakah ada cara untuk membalikkan penyortiran saat menggunakan fungsi custom orderBy dan memilih parameter untuk dipesan dari <select> seperti pada contoh Anda?

— cre8value

0

lihat sampel w3schools: https://www.w3schools.com/angular/angular_filters.asp https://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby_click

lalu tambahkan bendera "mundur":

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

0

Saat penggunaan saran saya () mudah untuk mengelola tanggal jika mereka nilai string

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

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>

Luaskan cuplikan

— Tuan Rumah
sumber