it-swarm.com.de

winkelwiederholung in umgekehrter Richtung

Wie bekomme ich ein umgekehrtes Array in angle? Ich versuche den orderBy-Filter zu verwenden, aber es braucht ein Prädikat (z. B. 'name') zum Sortieren:

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

Gibt es eine Möglichkeit, das ursprüngliche Array rückgängig zu machen, ohne dass Folgendes sortiert wird:

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

Ich würde vorschlagen, einen benutzerdefinierten Filter wie diesen zu verwenden:

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

Was kann dann verwendet werden wie:

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

Hier geht es zur Arbeit: Plunker Demonstration


Dieser Filter kann an Ihre Bedürfnisse angepasst werden. Ich habe andere Beispiele in der Demonstration gegeben. Einige Optionen umfassen das Überprüfen, ob die Variable ein Array ist, bevor die Umkehrung ausgeführt wird, oder die Nachgiebigkeit erhöhen, um die Umkehrung weiterer Elemente wie z. B. Zeichenfolgen zuzulassen.

323
querie.cc

Das habe ich benutzt:

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

Update:

Meine Antwort war für die alte Version von Angular in Ordnung. Jetzt sollten Sie verwenden 

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

oder

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

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

193
amit bakle

Es tut mir leid, dass ich das nach einem Jahr angesprochen habe, aber es gibt eine neue, einfachere Lösung, die für Angular v1) funktioniert .3.0-rc.5 und höher .

Es wird in docs erwähnt: "Wenn keine Eigenschaft angegeben ist (z. B. '+'), wird das Array-Element selbst verwendet, um zu vergleichen, wo sortiert wird". Die Lösung wird also sein:

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

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

Diese Lösung scheint besser zu sein, da sie kein Array ändert und keine zusätzlichen Rechenressourcen erfordert (zumindest in unserem Code). Ich habe alle vorhandenen Antworten gelesen und ziehe diese denen immer noch vor.

124
Dmitry Gonchar

Sie können mit dem $ index-Parameter umkehren

<tr ng-repeat="friend in friends | orderBy:'$index':true">
52
jjhrms

Einfache Lösung: - (keine Methoden erforderlich)

ng-repeat = "friend in friends | orderBy: reverse:true"
41
Muhammad Hassam

Sie können einfach eine Methode in Ihrem Gültigkeitsbereich aufrufen, um sie wie folgt umzukehren:

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

Beachten Sie, dass $scope.reverse eine Kopie des Arrays erstellt, da Array.prototype.reverse das ursprüngliche Array ändert.

17
Anders Ekdahl

wenn Sie 1.3.x verwenden, können Sie Folgendes verwenden

{{ orderBy_expression | orderBy : expression : reverse}}

Beispiel Listet Bücher nach Veröffentlichungsdatum in absteigender Reihenfolge auf

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

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

13
Kumar

Wenn Sie anglejs Version 1.4.4 und höher verwenden, können Sie den "$ index" einfach sortieren.

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

Demo ansehen

9
vishnu

Wenn Sie MVC in .NET mit Angular verwenden, können Sie OrderByDecending () immer verwenden, wenn Sie Ihre Datenbankabfrage folgendermaßen ausführen:

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

Auf der Angular-Seite wird sie in einigen Browsern (IE) bereits umgekehrt. Wenn Sie Chrome und FF unterstützen, müssen Sie orderBy hinzufügen:

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

In diesem Beispiel würden Sie die Eigenschaft .Id in absteigender Reihenfolge sortieren. Wenn Sie Paging verwenden, wird dies komplizierter, da nur die erste Seite sortiert wird. Sie müssten dies über eine .js-Filterdatei für Ihren Controller oder auf andere Weise handhaben.

1
whyoz

Ich habe so etwas gefunden, aber statt Array verwende ich Objekte.

Hier ist meine Lösung für Objekte:

Benutzerdefinierten Filter hinzufügen:

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

Die können dann gerne verwendet werden

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

Wenn Sie alte Browserunterstützung benötigen, müssen Sie die Reduzierungsfunktion definieren (diese Funktion ist nur in ECMA-262 mozilla.org verfügbar.)

// 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;
};
}
0
Twois

Das liegt daran, dass Sie ein JSON-Objekt verwenden. Ändern Sie bei solchen Problemen Ihr JSON-Objekt in JSON-Array-Objekt.

Zum Beispiel,

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

Der orderBy-Filter führt eine stabile Sortierung ab Angular 1.4.5 durch. (Siehe GitHub-Pull-Request https://github.com/angular/angular.js/pull/12408 .)

Daher reicht es aus, ein constant -Prädikat zu verwenden und reverse auf true zu setzen:

<div ng-repeat="friend in friends | orderBy:0:true">{{friend.name}}</div>
0
user1012976

Ich füge eine Antwort hinzu, die niemand erwähnt hat. Ich würde versuchen, den Server dazu zu bringen, wenn Sie einen haben. Die clientseitige Filterung kann gefährlich sein, wenn der Server viele Datensätze zurückgibt. Sie könnten gezwungen sein, Paging hinzuzufügen. Wenn Sie Paging vom Server erhalten haben, befindet sich der Client-Filter auf Bestellung in der aktuellen Seite. Was den Endbenutzer verwirren würde. Wenn Sie also einen Server haben, senden Sie die Bestellung mit dem Anruf und lassen Sie ihn vom Server zurückgeben.

0
Jens Alenius

Ich war selbst mit diesem Problem frustriert und änderte deshalb den von @Trevor Senior erstellten Filter, als ich mit meiner Konsole auf ein Problem stieß, dass die umgekehrte Methode nicht verwendet werden konnte. Ich wollte auch die Integrität des Objekts bewahren, da Angular dies ursprünglich in einer ng-repeat-Anweisung verwendet. In diesem Fall habe ich die Eingabe von dumm (Schlüssel) verwendet, weil die Konsole sich darüber ärgert, dass es Duplikate gibt, und in meinem Fall musste ich nach $ index suchen. 

Filter: 

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

0
Coded Container

Nützlicher Tipp:

Sie können Ihr Array mit Vanilla Js umkehren: yourarray .reverse ()

Achtung: reverse ist destruktiv und ändert daher nicht nur die Variable, sondern auch Ihr Array.

0
Ke Vin

Sie können auch .reverse () verwenden. Es ist eine native Array-Funktion

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

0
Pian0_M4n