ters açılı tekrarlama

227

Ters bir diziyi açısal olarak nasıl alabilirim? orderBy filtre kullanmaya çalışıyorum, ama sıralamak için bir yüklem (örneğin 'ad') gerekir:

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

Sıralama olmadan orijinal diziyi tersine çevirmenin bir yolu var mı? bunun gibi:

<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
kaynak
4
Bu yeni ve doğru yoldur stackoverflow.com/a/16261373/988830
— om471987
@QuiteNothing İfadeli bir diziyi ters çevirmek istiyorsanız, bu doğru yoldur. Bu durumda, soru bir dizi saygı nasıl oldu olmadan biri.
— JayQuerie.com
<tr ng-repeat = "arkadaşlarda arkadaş | orderBy: '- name'">
— desmati
Basit 1 satır ve doğru çözüm için aşağıdaki cevabıma bakın. Herhangi bir yöntem yapmaya gerek yok. İnsanların neden bunun için ek yöntemler yaptığını merak ediyorum.
— Muhammed Hassam
ng-repeatDavranışı değiştirmek için her zaman filtreleri kullanın ! @Trevor Senior iyi bir iş çıkardı.
— Amir Savand

Yanıtlar:

329

Bu gibi özel bir filtre kullanmanızı öneririm:

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

Hangi daha sonra gibi kullanılabilir:

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

Burada çalıştığını görün: Plunker Gösteri

Bu filtre, görüldüğü gibi ihtiyaçlarınıza göre özelleştirilebilir. Gösteriye başka örnekler verdim. Bazı seçenekler, tersi gerçekleştirmeden önce değişkenin bir dizi olup olmadığını kontrol etmeyi veya dizeler gibi daha fazla şeyin tersine çevrilmesine izin vermeyi daha yumuşak hale getirmeyi içerir.

— JayQuerie.com
kaynak
21
Güzel! Sadece items.reverse()yeni bir tane oluşturmak ve onu döndürmek yerine diziyi değiştirdiğini unutmayın.
— Anders Ekdahl
12
Teşekkürler! Bunu göz ardı etmiştim. slice()Bu sorunu çözmek için bir yere attım .
— JayQuerie.com
9
if (!angular.isArray(items)) return false;Bir diziyi tersine çevirmeye çalışmadan önce dizininizin olduğunu doğrulamak için eklemeniz gerekir.
— 15
6
Null'a karşı daha savunmacı olmanız gerekiyor, bunun yerine aşağıdakileri kullanmalısınız: eşyaları iade et? items.slice (). reverse (): [];
— Chris Yeung
5
@Chris Yeung: Boşken "[]" değerini geri döndürmeniz önerilmez. Orijinal değeri döndürmek daha iyidir.
— Siva
202

Ne kullandım:

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

Güncelleme:

Cevabım Angular'ın eski sürümü için iyiydi. Şimdi,

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

veya

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

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

— fırında pişirmek
kaynak
Uing track by, bu benim için çalışan tek yol
@delboud Siparişten sonra parça kullanmalısınızBy:ng-repeat="friend in friends | orderBy:'+': true track by $index"
— Vibhum Bhardwaj
125

Bunu bir yıl sonra ortaya koyduğum için üzgünüm, ancak Angular v1.3.0-rc.5 ve sonraki sürümleri için çalışan yeni, daha kolay bir çözüm var .

Dokümanlar'da belirtilmiştir : "Hiçbir özellik sağlanmadıysa (örn." + "), Sıralama öğesinin karşılaştırılması için dizi öğesinin kendisi kullanılır". Yani, çözüm şöyle olacak:

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

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

Bu çözüm , bir diziyi değiştirmediği ve ek hesaplama kaynakları gerektirmediği için daha iyi görünüyor (en azından kodumuzda). Mevcut tüm cevapları okudum ve yine de bunu onlara tercih ediyorum.

— Dmitry Gonchar
kaynak
1
Bahşiş için teşekkürler! Bunu okuyan herkes için bir kafa gibi, rc4 ( v1.3.0-rc.4) 'de çalışmıyor gibi görünüyor . Yeni sürümde denemek için bir şans olursa, bize bildirin!
— mikermcneil
1
@mikermcneil Yorum için teşekkürler! Aynı belgelere göre v1.3.0-rc.5( rc.5 dokümanlar vs rc.4 dokümanlar ) ' dan başlayarak çalışmalıdır . Cevabı güncelledim
— Dmitry Gonchar
1
Benim için çalışmıyor (v1.3.5). Güvenilir orderBy:'+':true, orderBy:'-':true, orderBy:'-':false, orderBy:'+':false:(
— Cody
2
@Cody Geç cevap verdiğim için üzgünüm. Buyrun - açısal v1.3.5 jsfiddle.net/dmitry_gonchar/L98foxhm/1 ile çalışan bir örnek . Muhtemelen sorun başka bir yerdeydi.
— Dmitry Gonchar
1
@alevkon Doğru. Ancak alanı ('+ id', '-id' fe) belirtirseniz çalışır. Belki de bu, açısal olarak bir alan belirtmezseniz normal sıra ile çalışmaz. Bu yöntemi dokümanlardan aldım (bağlantı cevapta), bu yüzden senin kadar şaşırdım. Her neyse, soru bir dizinin nasıl tersine çevrileceğiydi .
— Dmitry Gonchar
54

$ İndex parametresi ile tersine çevirebilirsiniz

<tr ng-repeat="friend in friends | orderBy:'$index':true">
— jjhrms
kaynak
13
Çalışmalı, ancak işe yaramaz (tırnak işaretleri arasında ve tırnak işaretleri olmadan denendi $index). Açısal 1.1.5'deyim.
— Mühendis
2
Benim için çalıştı ($ endeksi yerine sıralama için bir özellik kullanıyorduk) stackoverflow.com/questions/16261348/…
— Certs
4
AngularJS 1.2.13 ile çalışmaz. Her nesneye bir kimlik eklemek için nesne dizimi değiştirdim. Kimlik, dizinin içindeki nesnenin dizinidir. Sonra ng-repeat="friend in friends | orderBy:'id':true"çalışır.
— tanguy_k
51

Basit çözüm: - (herhangi bir yöntem yapmaya gerek yok)

ng-repeat = "friend in friends | orderBy: reverse:true"
— Muhammed Hasam
kaynak
2
Benim için iyi çalışıyor. Teşekkürler!
— HankScorpio
17

Sizin için tersine çevirmek için kapsamınızdaki bir yöntemi çağırabilirsiniz, şöyle:

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

Orijinal diziyi değiştirdiğinden $scope.reverseberi dizinin bir kopyasını oluşturduğunu unutmayın Array.prototype.reverse.

— Anders Ekdahl
kaynak
13

1.3.x kullanıyorsanız aşağıdakileri kullanabilirsiniz

{{ orderBy_expression | orderBy : expression : reverse}}

Örnek Kitapları yayınlanma tarihine göre azalan sırada listeleyin

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

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

— Kumar
kaynak
11

1.4.4 ve üzeri angularjs sürümünü kullanıyorsanız, sıralamanın kolay bir yolu " $ index " kullanmaktır.

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

demoyu görüntüle

— vişnu
kaynak
1

MVC Angular ile .NET kullanırken her zaman böyle db sorgunuzu yaparken OrderByDecending () kullanabilirsiniz:

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

Ardından Açısal tarafta, bazı tarayıcılarda (IE) zaten tersine çevrilecektir. Chrome ve FF'yi desteklerken, orderBy eklemeniz gerekir:

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

Bu örnekte, .Id özelliğinde azalan sırada sıralama yapıyorsunuz. Disk belleği kullanıyorsanız, bu yalnızca daha karmaşık hale gelir çünkü yalnızca ilk sayfa sıralanır. Bunu denetleyiciniz için bir .js filtre dosyası aracılığıyla veya başka bir şekilde ele almanız gerekir.

— whyoz
kaynak
0

.Reverse () öğesini de kullanabilirsiniz. Yerel bir dizi işlevi

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

— Pian0_M4n
kaynak
Aşağı oyunuz sadece bir şey ifade edebilir: daha fazla gelen veriniz var. {} Veya [] veri almaya devam ederse, her seferinde tersine dönecektir. Bu yeni bir özet
— Pian0_M4n
Bunu kullanmak isteyenler için uyarı: reversediziyi yerinde tersine çevirir, yalnızca ters kopyasını döndürmez. Bu, her değerlendirildiğinde, dizinin ters çevrileceği anlamına gelir.
— jcaron
0

Bunun nedeni JSON Nesnesi kullanmanızdır. Bu tür sorunlarla karşılaştığınızda JSON Nesnenizi JSON Array Nesnesi olarak değiştirin.

Örneğin,

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

Böyle bir şey buldum, ama dizi yerine nesneleri kullanıyorum.

İşte nesneler için benim çözüm:

Özel filtre ekle:

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;
    };
});

Hangi daha sonra gibi kullanılabilir

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

Eski tarayıcı desteğine ihtiyacınız varsa, azaltma işlevini tanımlamanız gerekir (bu yalnızca ECMA-262 mozilla.org'da mevcuttur )

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

Bu sorundan kendim hayal kırıklığına uğramıştım ve bu yüzden @Trevor Senior tarafından oluşturulan filtreyi, ters yöntemi kullanamayacağını söyleyerek konsolumla ilgili bir sorunla karşılaşırken değiştirdim. Ayrıca, nesnenin bütünlüğünü korumak istedim, çünkü Angular orijinal olarak ng-tekrar direktifinde kullanıyor. Bu durumda aptal (anahtar) girişini kullandım çünkü konsol yinelemeler olduğunu söyleyerek üzülecek ve benim durumumda $ dizinine göre izlemem gerekiyordu.

Filtre: 

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

— Kodlu Konteyner
kaynak
0

Kimsenin bahsetmediği bir cevap ekliyorum. Sunucunuz varsa bunu yapmaya çalışacağım. Sunucu çok fazla kayıt döndürürse istemcinin filtrelemesi tehlikeli olabilir. Çünkü sayfalama eklemek zorunda kalabilirsiniz. Sunucudan disk belleği varsa, siparişte istemci filtresi geçerli sayfada olacaktır. Bu son kullanıcının kafasını karıştırır. Eğer bir sunucunuz varsa, o zaman çağrı ile sipariş gönderin ve sunucunun geri dönmesine izin verin.

— Jens Alenius
kaynak
0

Yararlı ipucu:

Vanilla Js ile dizinizi tersine çevirebilirsiniz: yourarray .reverse ()

Dikkat: tersi yıkıcıdır, bu nedenle sadece değişkeninizi değil dizinizi de değiştirecektir.

— Ke Vin
kaynak
-2

Dizi yerli ters yöntemi kullanarak sugest her zaman filtre oluşturma veya kullanma üzerinde daha iyi bir seçimdir $index.

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

Plnkr_demo .

— Vishnudas Tekale Kulkarni
kaynak
Orijinal diziyi tersine çeviriyorsunuz ... Tersine çevrilmiş yeni bir dizi döndürmek daha iyi bir uygulama olacaktır.
— Vandervidi
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.