Группа AngularjsПо + заказПо

Я использую groupBy из angular-filter для группировки массива объектов по их свойству даты.

<div ng-repeat="(day, dayEvents) in events | groupBy: 'date' )">
 <h3>{{ day | date: mediumDate }}</h3>
</div>

Что производит следующее:

Feb 9, 2015 
Feb 10, 2015 
Feb 11, 2015 
Feb 12, 2015

Как я могу изменить порядок, чтобы начать с самой последней даты? Когда я печатаю на консоль, массив печатается в том порядке, в котором я хочу:

  Object {
     1423699200000: Array[1],
     1423612800000: Array[7],
     1423526400000: Array[11],
     1423440000000: Array[1]
 }

Я также написал собственный фильтр для обратного порядка после groupBy:

.filter("reverseOrder", function() {
        function sortNumber(a,b) {
            return  parseInt(b) - parseInt(a);
        }
        return function(collection) {
            var keys = Object.keys(collection).sort(sortNumber);
            var reveredCollection= {};
            var length=collection.length;
            angular.forEach(keys, function(key) {
                reveredCollection[key] = collection[key];
            });
           return reveredCollection;
        }
    })

Который я применил следующим образом:

<div ng-repeat="(day, dayEvents) in events | groupBy: 'date' | reverseOrder )">
     <h3>{{ day | date: mediumDate }}</h3>
</div>

javascript angularjs angularjs-filter
person Shakur    schedule 12.02.2015    source источник

Ответы (5)


arrow_upward
20
arrow_downward

Недавно была такая же проблема. groupBy создает объект, а orderBy нужен массив, так что тут немного забавности. В итоге я получил ответ прямо со страницы их проблем, где один из авторов отлично объяснил его вместе с примерами кода, которые для меня были в основном копированием/вставкой.

https://github.com/a8m/angular-filter/issues/57#issuecomment-65041792< /а>

person aron.duby    schedule 20.02.2015

arrow_upward
3
arrow_downward

Похоже, что правильный метод заключается в использовании | toArray: true | orderBy: customMappingFunction, однако я обнаружил, что производительность в этом случае ужасна. Я придумал решение, которое поддерживает производительность и дает правильный результат (хотя это кажется немного странным!)

<div ng-repeat="(key, results) in allResults | groupBy: '-someKey' )">
    <h3>{{ key | ltrim: '-' }}</h3>
    <ul>
        <li ng-repeat="result in results">
            {{ result }}
        </li>
    </ul>
</div>

По какой-то причине добавление - заставляет правильно сортировать groupBy, но также добавляет его к key, так что мы можем просто удалить его!

person Roi    schedule 28.07.2016

arrow_upward
1
arrow_downward

Мы можем добиться этого, упорядочив данные в контроллере и преобразовав вывод groupBy в массив.

В контроллере закажите записи перед отправкой на просмотр:

$scope.events = $filter('orderBy')(events, '-date');

Теперь шаблон получает данные в отсортированном порядке. После группировки нам нужно преобразовать его в Array:

<div ng-repeat="(day, dayEvents) in events | groupBy: 'date' | toArray:true )">
     <h3>{{ day | dayEvents[0].date: mediumDate }}</h3>
</div>
person Sairam Krish    schedule 16.06.2015

arrow_upward
-1
arrow_downward

Более простой способ перевернуть массив — использовать код из этот ответ

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

<div ng-repeat="(day, dayEvents) in events | groupBy: 'date' | reverseOrder )">
     <h3>{{ day | date: mediumDate }}</h3>
</div>
person Chris    schedule 12.02.2015
comment
Тем не менее, похоже, что фильтр возврата не влияет на то, как отображаются элементы. - person Shakur; 12.02.2015

arrow_upward
-2
arrow_downward

попробуйте использовать -

<div ng-repeat="(day, dayEvents) in events | groupBy: '-date' ">

P.S. Я до сих пор нигде не использовал groupBy! Но этот минус хорошо работает с атрибутом orderBy!

person Satyaki    schedule 18.02.2015
comment
groupBy и отрицательный знак не связаны. У них нет никаких отношений - person Sairam Krish; 16.06.2015