2015-02-12 15 views
8

Tôi đang sử dụng nhómBởi từ angular-filter để nhóm một mảng đối tượng theo thuộc tính ngày của chúng.Nhóm angularjsBy + orderBy

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

nào sản xuất như sau:

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

Làm thế nào tôi có thể đảo ngược thứ tự bắt đầu từ ngày gần đây nhất? Khi tôi in ra cửa sổ Console mảng được in với thứ tự tôi muốn:

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

Tôi cũng đã viết một bộ lọc tùy chỉnh để đảo ngược thứ tự sau 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; 
     } 
    }) 

Mà tôi đã áp dụng như này:

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

Trả lời

18

Gần đây đã có cùng một vấn đề. groupBy tạo một đối tượng, nhưng orderBy cần một mảng, do đó, có một chút ít tính liên quan. Tôi đã nhận được câu trả lời ngay từ trang vấn đề của họ, nơi một trong các tác giả thực hiện một công việc tuyệt vời để giải thích nó hoàn chỉnh với các mẫu mã cơ bản được sao chép/dán cho tôi.

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

-1

một cách dễ dàng hơn để đảo ngược một mảng là sử dụng mã từ this answer

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> 
+0

Vẫn như cũ, có vẻ như bộ lọc hoàn nguyên không có bất kỳ ảnh hưởng nào về cách hiển thị các mục. – Shakur

-2

thử sử dụng -

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

P.S- tôi đã không sử dụng groupby đến bây giờ bất cứ nơi nào Nhưng điều này trừ hoạt động tốt với orderBy thuộc tính!

+0

nhómBằng dấu và dấu âm không liên quan. Họ không có bất kỳ mối quan hệ nào –

0

Chúng ta có thể đạt được điều này bằng cách đặt hàng dữ liệu trong điều khiển & chuyển đổi đầu ra groupby để Array.

Trong điều khiển, ra lệnh cho các hồ sơ trước khi gửi đi để xem:

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

Bây giờ mẫu, nhận dữ liệu theo thứ tự sắp xếp. Sau khi nhóm, chúng ta cần phải thay đổi nó để Array:

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

Nó xuất hiện các phương pháp thích hợp là sử dụng | toArray: true | orderBy: customMappingFunction, tuy nhiên, tôi thấy việc thực hiện về vấn đề này là khủng khiếp. Tôi đã đưa ra một giải pháp mà giữ hiệu suất lên và tạo ra kết quả đúng - (! Mặc dù nó có vẻ hơi kỳ quặc)

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

Đối với bất cứ lý do nào, thêm - không buộc các groupBy để sắp xếp một cách chính xác, nhưng nó cũng thêm nó vào key, vì vậy chúng tôi chỉ có thể xóa nó!