Mithilfe von AngularJS wie könnte ich in zufälliger Reihenfolge eine Sammlung?

Wie würden Sie, um eine Liste der Elemente in AngularJS in zufälliger Reihenfolge? Ich dachte, dass die built-in orderBy filter funktionieren würde, aber ich bin mir nicht sicher, wie Sie Sie, ohne einige zusätzliche Daten zum Modell. Sowas wäre toll.

item in items | orderBy:random

Mein Nächster Gedanke war es, erstellen Sie einen benutzerdefinierten filter, aber ich würde es vorziehen, zu vermeiden, dass, wenn es etwas bessere sind bereits erhältlich.

Nicht ein Experte in Eckig, aber die filter bekommen könnte jederzeit ausgewertet, und würde nur zu halten, mischt die Elemente die ganze Zeit. Möchten Sie vielleicht eine "zufällige" Eigenschaft, um Elemente, die, wenn Sie geladen ist, und um nach dieser Eigenschaft.
hat Recht. In den aktuellen Versionen von AngularJS, die akzeptierte Antwort unten erzeugt 'infdig' Fehler in der Konsole, da die Sortierung wird wiederholt, bis der gleichen Reihenfolge produziert wird, zweimal. Siehe diese Frage.

InformationsquelleAutor Ryan Montgomery | 2013-06-14

  1. 17

    orderBy kann eine Funktion parameter, wie array.sort damit können Sie Ihren HTML-oben und eine Funktion definieren, die random auf den Anwendungsbereich wie:

    $scope.random = function(){
    return 0.5 - Math.random();
};

    Dies gibt einen zufälligen Wert manchmal negativ, manchmal positiv, manchmal 0, die zufällig im array sortiert.

    Aber der Wert wird nicht konsistent (das bedeutet, dass Sie finden, dass manchmal a<b und b<a, in der gleichen Reihenfolge). Sind Sie sicher, das hätte keine Nebenwirkungen?
    Bereit meinem ursprünglichen Kommentar. Wenn jeder comparation zufällig ist, könnten Sie am Ende mit a<b, b<c, a>c, und Sie sollten sicherstellen, dass die Sortier-Algorithmus verarbeiten kann (in der Tat, es würde nicht mit der definition von order). Dogbert ' s Kommentar beschreibt eine Methode für die zufällige Bestellung, wo die Reihenfolge ist zufällig UND konsistent über einen Lauf.
    Froh, dass es geklappt für Sie. Sie sollten nicht brauchen, verwenden Sie Klammern, um es aufzurufen, überprüfen Sie die Geige von @owenmead unten.
    Sind Sie richtig. Die richtige Art und Weise zum ausführen der filter ist mit nur der name der Funktion, ohne Klammern. Danke.
    Auch ein Punkt zu beachten, dass diese nicht funktioniert, wenn Sie verwenden, track by $index. Vielen Dank für die Lösung.

    InformationsquelleAutor sh0ber

  2. 6

    Tun, eine schnelle fiddle sh0ber Methode scheint gut zu funktionieren:
    http://jsfiddle.net/owenmead/fa4v8/1/

    <div ng-controller="MyCtrl">
  <p ng-repeat="i in list|orderBy:random">{{i}}</p>
</div>

function MyCtrl($scope) {
  $scope.list = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
  $scope.random = function() {
    return 0.5 - Math.random();
  }
}

    Eckig ist orderBy verwendet JavaScript, sort() auf eine Kopie der Liste. Blick auf eine andere Antwort, bestimmte Browser sind stabil in Ihrer Art, andere sind es nicht. Vielleicht testen Sie einfach die Geige in ein paar Browsern und Sie sollten gut zu gehen:
    Array.Sortieren Sie Sortieren die Stabilität in den Verschiedenen Browsern

    PS. Konnte nicht kommentieren, sh0ber Antwort, wie ich nicht über 50 rep

    FYI - dies ist verursacht Error: [$rootScope:infdig]
    für Error: [$rootScope:infdig] geschieht dies in späteren Versionen von angular, wo die digest-Zyklus führt die random-Funktion zweimal und die Ergebnisse sind inkonsistent Wiederholungen (erzeugen damit eine unendliche digest-Zyklus oder "infdig")
    Ein Hinweis auf @DavidAnderton ' s point (das war sehr hilfreich). Ich merkte, ich hatte zwei Nummer-Felder wurden randomisiert wurde, werfen Sie den Fehler. Ich habe eine track by model.id und es funktioniert jetzt Super.

    InformationsquelleAutor owenmead

Schreibe einen Kommentar