2015-04-07 10 views
5

Przy użyciu dyrektywy Angular JS ngRepeat, w jaki sposób mogę zrobić tak, aby wynikowe iteracje przebiegały w odwrotnej kolejności? Używam obiektu, w którym klucze są liczbami, a ja chciałbym je posortować, zstępując.Jak odwrócić kolejność Angular ngRepeat za pomocą klawiszy obiektu, które są numeryczne

Wiem, że naprawdę nie można posortować obiektu za pomocą takich kluczy (bez zachowania odniesienia do tablicy), ale czy to w ogóle możliwe z Angular?

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script> 
 

 
<body> 
 
    <script> 
 
    var app = angular.module('myApp', []); 
 
    app.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; 
 
     }; 
 
    }); 
 
    app.controller('myController', ['$scope', 
 
     function($scope) { 
 
     $scope.data = { 
 
      2013: 'oldest 4', 
 
      2014: 'older 3', 
 
      2015: 'new 2', 
 
      2016: 'newest 1' 
 
     }; 
 
     } 
 
    ]); 
 
    </script> 
 
    <div id="myApp" ng-app='myApp' ng-controller="myController"> 
 
    <div ng-repeat="(date,text) in data">{{text}}</div> 
 
    <hr/> 
 
    <div ng-repeat="(date,text) in data | orderBy:date:reverse">{{text}}</div> 
 
    <hr/> 
 
    <div ng-repeat="(date,text) in data | orderBy:'-date'">{{text}}</div> 
 
    <hr/> 
 
    <div><b>Correct Answer!:</b></div><hr/> 
 
    <div ng-repeat="(date,text) in data | orderObjectBy:date:true">{{text}}</div> 
 
    </div> 
 

 
</body>

Na przykład, chciałbym to uporządkować od najnowszych do najstarszych (przeciwieństwem tego, co robi w tym kodzie)

+0

Jeśli chcesz zamówić według daty w kolejności odwrotnej potem po prostu umieścić „-” przed nazwą pola. Tak więc kod będzie "(data, tekst) w danych | orderBy: '- date" " – Anita

+0

użyć filtra .. mam na myśli -ng-repeat =' (data, tekst) w danych s | orderBy: date: reverse ' – Ved

+0

Dzięki chłopaki, ale próbowałem tego ze zaktualizowanym kodem w moim pytaniu nie działa. –

Odpowiedz

5

ng-repeat doen't praca z obiektem dla niego musisz utworzyć własny filtr.

<div ng-repeat="(date,text) in data | orderObjectBy:date:true">{{text}}</div> 

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

Plunker

Nadzieja to pomaga :)

+1

Dziękujemy! Bardzo pomocne, w rzeczy samej. –

+0

@d -_- b cieszę się, że ci pomogę :) – squiroid

+0

Właściwie 'ng-repeat' działa z obiektem (tzn. Może iterować jego właściwości). To 'orderBy' nie może sortować niczego poza tablicami. – Javarome

Powiązane problemy