ang ng-repeat berulang secara terbalik

227

Bagaimana saya bisa mendapatkan array terbalik di sudut? Saya mencoba menggunakan filter orderBy, tetapi perlu predikat (misalnya 'nama') untuk mengurutkan:

<tr ng-repeat="friend in friends | orderBy:'name':true">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
<tr>

Apakah ada cara untuk membalikkan array asli, tanpa menyortir. seperti itu:

<tr ng-repeat="friend in friends | orderBy:'':true">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
<tr>
javascript  arrays  angularjs  reverse  angularjs-ng-repeat 
— Delremm
sumber
4
Ini adalah cara baru dan benar stackoverflow.com/a/16261373/988830
— om471987
@ QuiteNothing Itu adalah cara yang tepat jika Anda ingin membalikkan array dengan ekspresi. Dalam kasus ini, pertanyaannya adalah bagaimana cara memuja array tanpa array .
— JayQuerie.com
<tr ng-repeat = "friend in friends | orderBy: '- name'">
— desmati
Lihat jawaban saya di bawah ini untuk 1 baris sederhana dan solusi yang benar. Tidak perlu membuat metode apa pun. Saya bertanya-tanya mengapa orang membuat metode tambahan untuk ini.
— Muhammad Hassam
Selalu gunakan filter untuk mengubah ng-repeatperilaku! @ Senior Senior melakukan pekerjaan dengan baik.
— Amir Savand

Jawaban:

329

Saya sarankan menggunakan filter khusus seperti ini:

app.filter('reverse', function() {
  return function(items) {
    return items.slice().reverse();
  };
});

Yang kemudian bisa digunakan seperti:

<div ng-repeat="friend in friends | reverse">{{friend.name}}</div>

Lihat berfungsi di sini: Demonstrasi Plunker

Filter ini dapat disesuaikan agar sesuai dengan kebutuhan Anda sesuai keinginan. Saya telah memberikan contoh lain dalam demonstrasi. Beberapa opsi termasuk memeriksa bahwa variabel adalah array sebelum melakukan kebalikan, atau membuatnya lebih lunak untuk memungkinkan pembalikan lebih banyak hal seperti string.

— JayQuerie.com
sumber
21
Bagus! Perlu diketahui bahwa items.reverse()memodifikasi array bukan hanya membuat yang baru dan mengembalikannya.
— Anders Ekdahl
12
Terima kasih! Saya telah mengabaikan itu. Saya melempar slice()untuk memecahkan masalah itu.
— JayQuerie.com
9
Anda harus menambahkan if (!angular.isArray(items)) return false;untuk memverifikasi bahwa Anda memiliki array sebelum mencoba membalikkannya.
— respectTheCode
6
Harus lebih defensif terhadap null, harus menggunakan yang berikut ini sebagai gantinya: mengembalikan item? items.slice (). reverse (): [];
— Chris Yeung
5
@Chris Yeung: Tidak disarankan untuk mengembalikan "[]" kosong saat nol. Lebih baik mengembalikan nilai aslinya.
— Siva
202

Inilah yang saya gunakan:

<alert ng-repeat="alert in alerts.slice().reverse()" type="alert.type" close="alerts.splice(index, 1)">{{$index + 1}}: {{alert.msg}}</alert>

Memperbarui:

Jawaban saya OK untuk versi lama Angular. Sekarang, Anda harus menggunakan

ng-repeat="friend in friends | orderBy:'-'"

atau

ng-repeat="friend in friends | orderBy:'+':true"

dari https://stackoverflow.com/a/26635708/1782470

— ya bakle
sumber
Uing track by, ini satu-satunya cara yang bekerja untuk saya
@delboud Anda harus menggunakan trek dengan setelah pesanan Dengan:ng-repeat="friend in friends | orderBy:'+': true track by $index"
— Vibhum Bhardwaj
125

Maaf sudah membahas ini setelah satu tahun, tetapi ada solusi baru yang lebih mudah , yang berfungsi untuk Angular v1.3.0-rc.5 dan yang lebih baru .

Disebutkan dalam dokumen : "Jika tidak ada properti yang disediakan, (misalnya '+') maka elemen array itu sendiri digunakan untuk membandingkan tempat penyortiran". Jadi, solusinya adalah:

ng-repeat="friend in friends | orderBy:'-'" atau

ng-repeat="friend in friends | orderBy:'+':true"

Solusi ini tampaknya lebih baik karena tidak mengubah array dan tidak memerlukan sumber daya komputasi tambahan (setidaknya dalam kode kami). Saya sudah membaca semua jawaban yang ada dan masih lebih suka yang ini.

— Dmitry Gonchar
sumber
1
Terima kasih atas tipnya! Sebagai kepala bagi orang lain yang membaca ini, sepertinya ini tidak berfungsi di rc4 ( v1.3.0-rc.4). Jika ada yang mendapat kesempatan untuk mencobanya di rilis baru, beri tahu kami!
— mikermcneil
1
@mikermcneil Terima kasih atas komentarnya! Menurut dokumentasi yang sama, ia harus bekerja mulai dari v1.3.0-rc.5( rc.5 docs vs rc.4 docs ). Saya telah memperbarui jawabannya
— Dmitry Gonchar
1
Tidak bekerja untuk saya (v1.3.5). Mencoba orderBy:'+':true, orderBy:'-':true, orderBy:'-':false, orderBy:'+':false:(
— Cody
2
@Cody Maaf atas jawaban yang terlambat. Ini dia - contoh kerja dengan angular v1.3.5 jsfiddle.net/dmitry_gonchar/L98foxhm/1 . Mungkin masalahnya ada di tempat lain.
— Dmitry Gonchar
1
@alevkon Benar. Tapi itu berfungsi jika Anda menentukan bidang ('+ id', '-id' fe). Mungkin ini adalah bug di Angular, bahwa itu tidak berfungsi dengan urutan normal jika Anda tidak menentukan bidang? Saya mengambil metode ini dari dokumen (tautan ada di jawaban), jadi saya kaget juga Anda. Bagaimanapun, pertanyaannya adalah bagaimana cara membalikkan array.
— Dmitry Gonchar
54

Anda dapat membalikkan dengan parameter $ index

<tr ng-repeat="friend in friends | orderBy:'$index':true">
— jjhrm
sumber
13
Harus bekerja, tetapi tidak (dicoba dengan dan tanpa tanda kutip $index). Saya di Angular 1.1.5.
— Insinyur
2
Bekerja untuk saya (menggunakan properti untuk mengurutkan alih-alih $ index) stackoverflow.com/questions/16261348/…
— Certs
4
Tidak bekerja dengan AngularJS 1.2.13. Saya memodifikasi array objek saya untuk menambahkan id ke setiap objek. Id menjadi indeks dari objek di dalam array. Lalu ng-repeat="friend in friends | orderBy:'id':true"bekerja.
— tanguy_k
51

Solusi sederhana: - (tidak perlu membuat metode apa pun)

ng-repeat = "friend in friends | orderBy: reverse:true"
— Muhammad Hassam
sumber
2
Bekerja dengan baik untuk saya. Terima kasih!
— HankScorpio
17

Anda bisa memanggil metode pada lingkup Anda untuk membalikkannya untuk Anda, seperti ini:

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
    <script>
    angular.module('myApp', []).controller('Ctrl', function($scope) {
        $scope.items = [1, 2, 3, 4];
        $scope.reverse = function(array) {
            var copy = [].concat(array);
            return copy.reverse();
        }
    });
    </script>
</head>
<body ng-controller="Ctrl">
    <ul>
        <li ng-repeat="item in items">{{item}}</li>
    </ul>
    <ul>
        <li ng-repeat="item in reverse(items)">{{item}}</li>
    </ul>
</body>
</html>

Perhatikan bahwa $scope.reversemenciptakan salinan array karena Array.prototype.reversememodifikasi array asli.

— Anders Ekdahl
sumber
13

jika Anda menggunakan 1.3.x, Anda dapat menggunakan yang berikut ini

{{ orderBy_expression | orderBy : expression : reverse}}

Contoh Daftar buku berdasarkan tanggal penerbitan dalam urutan menurun

<div ng-repeat="book in books|orderBy:'publishedDate':true">

sumber: https://docs.angularjs.org/api/ng/filter/orderBy

— Kumar
sumber
11

Jika Anda menggunakan angularjs versi 1.4.4 dan lebih tinggi , cara mudah untuk mengurutkan adalah dengan menggunakan " $ index ".

 <ul>
  <li ng-repeat="friend in friends|orderBy:$index:true">{{friend.name}}</li>
</ul>

lihat demo

— Wisnu
sumber
1

Saat menggunakan MVC di .NET dengan Angular Anda selalu dapat menggunakan OrderByDecending () saat melakukan permintaan db Anda seperti ini:

var reversedList = dbContext.GetAll().OrderByDecending(x => x.Id).ToList();

Kemudian di sisi Angular, itu sudah akan terbalik di beberapa browser (IE). Saat mendukung Chrome dan FF, Anda kemudian perlu menambahkan orderBy:

<tr ng-repeat="item in items | orderBy:'-Id'">

Dalam contoh ini, Anda akan mengurutkan dalam urutan menurun pada properti .Id. Jika Anda menggunakan paging, ini menjadi lebih rumit karena hanya halaman pertama yang akan diurutkan. Anda harus menangani ini melalui file filter .js untuk controller Anda, atau dengan cara lain.

— whyoz
sumber
0

Anda juga dapat menggunakan .reverse (). Ini adalah fungsi array asli

<div ng-repeat="friend in friends.reverse()">{{friend.name}}</div>

— Pian0_M4n
sumber
Pemungutan suara Anda hanya dapat berarti satu hal: Anda memiliki lebih banyak data yang masuk. Jika {} atau [] terus menerima data, itu akan membalik setiap kali, jelas. Ini adalah intisari baru
— Pian0_M4n
Peringatan untuk siapa pun yang ingin menggunakan ini: reversemembalikkan array di tempatnya, itu tidak hanya mengembalikan salinan yang terbalik. Ini berarti bahwa setiap kali ini dievaluasi, array akan dibalik.
— jcaron
0

Itu karena Anda menggunakan objek JSON. Ketika Anda menghadapi masalah seperti itu maka ubah Objek JSON Anda menjadi Objek Array JSON.

Sebagai contoh,

{"India":"IN","America":"US","United Kingdon":"UK"} json object
[{"country":"India","countryId":"IN"},{"country":"America","countryId":"US"},{"country":"United Kingdon","countryId":"UK"}]
— pengguna5891403
sumber
0

Saya menemukan sesuatu seperti ini, tetapi bukannya array saya menggunakan objek.

Ini solusi saya untuk objek:

Tambahkan filter khusus:

app.filter('orderObjectBy', function() {
    return function(items, field, reverse){

        var strRef = function (object, reference) {
            function arr_deref(o, ref, i) {
                return !ref ? o : (o[ref.slice(0, i ? -1 : ref.length)]);
            }
            function dot_deref(o, ref) {
                return !ref ? o : ref.split('[').reduce(arr_deref, o);
            }
            return reference.split('.').reduce(dot_deref, object);
        };

        var filtered = [];

        angular.forEach(items, function(item) {
           filtered.push(item);
        });
        filtered.sort(function (a, b) {
           return (strRef(a, field) > strRef(a, field) ? 1 : -1);
        });
        if(reverse) filtered.reverse();
        return filtered;
    };
});

Yang kemudian bisa digunakan seperti

<div ng-repeat="(key, value) in items | orderObjectBy:'field.any.deep':true">

Jika Anda memerlukan dukungan browser lama, Anda harus mendefinisikan fungsi pengurangan (ini hanya tersedia di ECMA-262 mozilla.org )

// Production steps of ECMA-262, Edition 5, 15.4.4.21
// Reference: http://es5.github.io/#x15.4.4.21
if (!Array.prototype.reduce) {
Array.prototype.reduce = function(callback /*, initialValue*/) {
'use strict';
  if (this == null) {
    throw new TypeError('Array.prototype.reduce called on null or undefined');
  }
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }
  var t = Object(this), len = t.length >>> 0, k = 0, value;
  if (arguments.length == 2) {
    value = arguments[1];
  } else {
    while (k < len && !(k in t)) {
      k++; 
    }
    if (k >= len) {
      throw new TypeError('Reduce of empty array with no initial value');
    }
    value = t[k++];
  }
  for (; k < len; k++) {
    if (k in t) {
      value = callback(value, t[k], k, t);
    }
  }
  return value;
};
}
— Twois
sumber
0

Saya merasa frustrasi dengan masalah ini sendiri dan saya memodifikasi filter yang dibuat oleh @Trevor Senior ketika saya mengalami masalah dengan konsol saya mengatakan bahwa itu tidak dapat menggunakan metode sebaliknya. Saya juga ingin menjaga integritas objek karena inilah yang awalnya digunakan Angular dalam arahan ng-repeat. Dalam hal ini saya menggunakan input bodoh (kunci) karena konsol akan kesal mengatakan ada duplikat dan dalam kasus saya, saya perlu melacak dengan $ indeks.

Saring: 

angular.module('main').filter('reverse', function() {
    return function(stupid, items) {
    var itemss = items.files;
    itemss = itemss.reverse();  
    return items.files = itemss; 
  };
});

HTML: <div ng-repeat="items in items track by $index | reverse: items">

— Wadah kode
sumber
0

Saya menambahkan satu jawaban yang tidak ada yang disebutkan. Saya akan mencoba membuat server melakukannya jika Anda memilikinya. Pemfilteran klien dapat berbahaya jika server mengembalikan banyak catatan. Karena Anda mungkin terpaksa menambahkan paging. Jika Anda memiliki paging dari server maka filter klien pada urutan, akan berada di halaman saat ini. Yang akan membingungkan pengguna akhir. Jadi jika Anda memiliki server, maka kirim orderby dengan panggilan dan biarkan server mengembalikannya.

— Jens Alenius
sumber
0

Tip yang berguna:

Anda dapat membalikkan array dengan vanilla Js: yourarray .reverse ()

Perhatian: reverse adalah destruktif, sehingga akan mengubah array Anda, bukan hanya variabel.

— Ke Vin
sumber
-2

Saya akan menyarankan menggunakan metode reverse native array selalu pilihan yang lebih baik daripada membuat filter atau menggunakan $index.

<div ng-repeat="friend in friends.reverse()">{{friend.name}}</div>

Plnkr_demo .

— Vishnudas Tekale Kulkarni
sumber
Anda membalikkan array asli ... Praktek yang lebih baik adalah mengembalikan array baru yang dibalik.
— Vandervidi
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.