die Sortierung der Werte einer hash-Objekt in ngRepeat - angularJS

Habe ich ein Objekt wie dieses:

$scope.phones = new Object();
$scope.phones['id1'] = {
    "name":"Phone Name1",
    "dateReleased":"2012-1-09 15:48:24"
};
$scope.phones['id2'] = {
    "name": "Phone Name2",
    "dateReleased":"2012-3-12 15:32:11"
};
$scope.phones['id3'] = {
    "name": "Phone Name3",
    "dateReleased":"2012-2-10 13:53:32"
};

Ich bin Anzeige dieser mit ngRepeat. Ich bin nicht in der Lage, um durch dateReleased. Zu bestellen im Rückwärtsgang nicht funktioniert. Meine ngRepeat sieht dies:

<li ng-repeat="phone in phones | orderBy:dateReleased:true">
    <p>{{phone.name}}</p>
    <p>{{phone.dateReleased}}</p>
</li>
InformationsquelleAutor Chai Nadig | 2012-11-25
  1. 5

    Wenn Sie das Kontrollkästchen Dokumentation es sagt, dass der Ausdruck in orderBy kann ein Funktion, ein string oder eine Array. Deshalb müssen Sie dateReleased einen string: 'dateReleased'

    Darüber hinaus müssen Sie auch Ihre Handys Objekt um ein Array.

    Versuchen:

    $scope.phones = [{
        "name":"Phone Name1",
        "dateReleased":"2012-1-09 15:48:24"
    },{
        "name": "Phone Name2",
        "dateReleased":"2012-3-12 15:32:11"
    },{
        "name": "Phone Name3",
        "dateReleased":"2012-2-10 13:53:32"
    }];

<li ng-repeat="phone in phones | orderBy:'dateReleased':true">
    <p>{{phone.name}}</p>
    <p>{{phone.dateReleased}}</p>
</li>
    InformationsquelleAutor lgomezma
  2. 12

    Während ngRepeat iterieren ein hash-Objekt, wie $scope.phones in Ihrem Beispiel, der eingebaute orderBy filter wird nicht funktionieren. Ich glaube, dies ist aufgrund der Art, wie Objekte gespeichert sind. Wie andere bemerkt haben, müssen Sie zum konvertieren von hash in ein array. Während Sie können dies tun, indem Sie die Methoden, die oben vorgeschlagenen, die ich lieber tun Sie es mit einem benutzerdefinierten filter. Das gibt mir den Vorteil, dass es nicht zu ändern, meine hash direkt, und auch lassen Sie mich die Wiederverwendung der filter mit anderen hashes.

    yourApp.filter('orderObjectBy', function() {
  return function(items, field, reverse) {
    var filtered = [];
    angular.forEach(items, function(item) {
      filtered.push(item);
    });
    filtered.sort(function (a, b) {
      return (a[field] > b[field] ? 1 : -1);
    });
    if(reverse) filtered.reverse();
    return filtered;
  };
});

    Dieser filter wandelt das Objekt in einem standard-array und sortiert es durch das Feld, das Sie angeben. Sie können die orderObjectBy filter genau wie orderBy, darunter ein boolescher Wert, der nach dem Feldnamen, um festzulegen, ob die Bestellung storniert werden. In anderen Worten, false ist aufsteigend, true ist absteigend.

    <li ng-repeat="phone in phones | orderObjectBy:'dateReleased':true">
  <p>{{phone.name}}</p>
  <p>{{phone.dateReleased}}</p>
</li>

    Habe ich eine post auf meinem blog zu diesem Thema.

    • Den code aus Ihrem blog-post funktioniert nicht, während dieser nicht... seltsam 🙂 Danke dude, mein Leben gerettet!
    InformationsquelleAutor Justin Klemm
  3. 3

    Beiden anderen Antworten bekommen Sie einen Teil des Weges gibt, aber nicht alle den Weg...

    Müssen Sie eine Funktion erstellen, die auf Ihrem Umfang, der konvertiert das Objekt zu einem array wie folgt:

    $scope.phonesArray = function() {
    var result = [];
    angular.forEach($scope.phones, function(phone, id) {
      result.push(phone);
    });
    return result;
};

    Dann würde man Sie statt dessen Ihr Objekt in Ihrem ngRepeat:

    <li ng-repeat="phone in phonesArray() | orderBy:'dateReleased':true">
    <p>{{phone.name}}</p>
    <p>{{phone.dateReleased}}</p>
</li>

    Auch: Beachten Sie, dass 'dateReleased' ist ein string, also Sie weiß $eval string aus der aktuellen Element, ansonsten überprüfen Sie die parent $scope.dateReleased, die nicht existiert.

    Hier ist ein plunk, was ich denke, Sie versuchen zu tun

    EDIT: Du kannst auch "konvertieren" das Objekt in ein array und speichern es auf dem $scope, wenn Sie befürchten, die Funktion so zu tun, als zu "teuer", aber das sollte kein Problem sein, da Sie die Entwicklung ein clientseitiger app für einen Benutzer, und nicht ein server-Anwendung für viele Anwender, das heißt, Sie haben ein wenig Spielraum für "teuer". (Die es nicht sowieso)

    InformationsquelleAutor Ben Lesh
  4. 2

    Erstens, Sie müssen verstehen, dass ng:filter und ng:orderBy arbeiten mit Arrays (eine geordnete Sammlung von Elementen), aber Sie versuchen, verwenden Sie Sie auf das Objekt (_un_ordered Sammlung von Elementen). Ein möglicher Ansatz ist es, sammeln Sie alle Objekte in ein array, dann gehen Sie mit ng-repeat auf stattdessen. Wie diese:

    <ul ng-init="phones = [
      {name:'Phone Name 1', dateReleased:'2011-1-09 15:48:24'}
    , {name:'Phone Name 2', dateReleased:'2012-3-12 15:32:11'}
    , {name:'Phone Name 3', dateReleased:'2012-2-10 13:53:32'}]; 
    pred = '-dateReleased';" >
    <li ng-repeat="phone in phones | orderBy:pred">
        <p>{{phone.name}}</p>
        <p>{{phone.dateReleased}}</p>
    </li>
</ul>
    InformationsquelleAutor raina77ow
Schreibe einen Kommentar