AngularJs sắp xếp đối tượng trong ngRepeat

Question

Tôi đang sử dụng AngularJs và đã tìm thấy sự cố khi sắp xếp các thuộc tính của đối tượng băm trong mẫu.
đối tượng của tôi là như sau:

function TestCtrl($scope){ 
    $scope.week = {'MONDAY': ['manuel'], 'TUESDAY': [], 'WEDNESDAY': ['valerio'], 'THURSDAY': ['manuel', 'valerio'], 'FRIDAY': []} 
} 

Bây giờ, khi tôi cố gắng để in các giá trị trong mẫu của tôi:

<div ng-repeat="(day, names) in week"> 
    <span>{{day}}</span> 
    <ul> <li ng-repeat="name in names">{{name}}</li> </ul> 
</div> 

Thứ tự của các ngày in là khác nhau: FRIDAY MONDAY THURSDAY TUESDAY WEDNESDAY

tôi đã cố gắng để áp dụng bộ lọc orderBy nhưng tôi nghĩ rằng nó không hoạt động với các đối tượng, nhưng chỉ với các mảng ...

Làm thế nào tôi có thể đặt hàng?

Answer 1

Theo AngularJS docs (phiên bản 1.3.20):

Bạn cần phải nhận thức rằng đặc tả JavaScript không xác định theo thứ tự nào nó sẽ trả lại chìa khóa cho một đối tượng. Để có một thứ tự xác định được đảm bảo cho các khóa, số phiên bản Angular lên đến và bao gồm 1.3 sắp xếp các phím theo thứ tự abc.

Một cách giải quyết là sử dụng một loạt các phím:

function TestCtrl($scope){ 
    $scope.week = { 
     'MONDAY': ['manuel'], 'TUESDAY': [], 
     'WEDNESDAY': ['valerio'], 'THURSDAY': ['manuel', 'valerio'],  
     'FRIDAY': []} 

    $scope.weekDays = ["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY"]; 
} 

Sử dụng mảng trong quan điểm cho lặp:

<div ng-repeat="day in weekDays"> 
    <span>{{day}}</span> 
    <ul> <li ng-repeat="name in week[day]">{{name}}</li> </ul> 
</div> 

---

Update từ AngularJS phiên bản 1.4.6 docs:

Phiên bản 1.4 đã xóa phân loại chữ cái. Hiện tại, chúng tôi dựa vào đơn đặt hàng được trình duyệt trả lại khi chạy for key in myObj.

Answer 2

Không có cách nào để đặt hàng các đối tượng băm như thế. Không chỉ ở góc cạnh mà trong javascript nói chung.

tôi sẽ chuyển đổi các đối tượng băm để một mảng của các đối tượng, một cái gì đó như thế:

$scope.week = [{day: 'MONDAY', names: ['manuel']}, {day: 'TUESDAY', names: []} ...]; 

Và sau đó thay đổi quan điểm một cái gì đó như thế:

<div ng-repeat="day in week|orderBy:'day'"> 
    <span>{{day.day}}</span> 
    <ul> <li ng-repeat="name in day.names">{{name}}</li> </ul> 
</div> 

Answer 3

Câu hỏi này là cũ, nhưng Tôi đã kết thúc với một câu trả lời cho điều này mà tôi nghĩ có thể là một sự cải tiến trên một số câu trả lời trước đó.

Thay vì chỉ đơn giản là chuyển đổi đối tượng thành một mảng, nhiều DRY hơn để tạo bộ lọc góc làm điều đó cho bạn và sau đó là ngRepeat hoặc ngOptions.

Như một ví dụ:

angular.module('myproject') 
    .filter('objOrder', function() { 
     return function(object) { 
      var array = []; 
      angular.forEach(object, function (value, key) { 
       array.push({key: key, value: value}); 
      }); 
      return array; 
     }; 
    }); 

Sau đó, với một đối tượng như:

$scope.degrees: { 
     ASC: "Associate's", 
     BAS: "Bachelor's", 
     MAS: "Master's", 
     MD: "M.D.", 
     JD: "J.D.", 
     PHD: "Ph.D", 
     OTH: "Other" 
    } 

Chúng ta có thể sử dụng nó như vậy:

<select 
    ng-model="myDegree" 
    required 
    ng-options="item.key as item.value for item in degrees | objOrder" 
    > 
</select> 

Bằng cách này, bạn không phải tạo một mảng mới và gây ô nhiễm $scope, cũng không phải bạn phải quay lại và thay đổi đối tượng thực tế degrees của bạn có thể có tác dụng phụ không mong muốn.

Answer 4

Điều này đã được sửa trong Angular 1.4. Như đã nêu trong tài liệu chính thức của Angular bên dưới:

Phiên bản 1.4 đã xóa phân loại chữ cái. Bây giờ chúng ta dựa vào thứ tự trả về bởi các trình duyệt khi chạy for key in myObj

https://docs.angularjs.org/api/ng/directive/ngRepeat

Answer 5

Có thực sự là một giải pháp đơn giản ... Các phím đối tượng không được ra lệnh theo mặc định NHƯNG nếu bạn tạo đối tượng trong trình duyệt từ đầu trình duyệt của bạn WILL biết trật tự;)

Ví dụ:

// test-1 
var data = {}; 
data['a'] = 10; 
data['b'] = 5; 
data['c'] = 2; 

Object.keys(data); // ["a", "b", "c"] 


// test-2 
var data = {}; 
data['b'] = 5; 
data['a'] = 10; 
data['c'] = 2; 

Object.keys(data); // ["b", "a", "c"] 

Vì vậy, chỉ đơn giản là ... tái tạo đối tượng ... hoặc sử dụng bộ lọc đơn giản này:

.filter('orderObject', function() { 
    return function (object, reverse) { 
     var keys = Object.keys(object || {}).sort(); 
     if (reverse) keys.reverse(); 
     for (var ordered = {}, i = 0; keys[i]; i++) { 
      ordered[keys[i]] = object[keys[i]]; 
     } 
     return ordered; 
    } 
}) 

Ví dụ với các đối tượng thường xuyên:

<!-- MARKUP : DEFAULT --> 
<table> 
    <tr ng-repeat="(key, value) in data"> 
     <td>{{key}}</td> 
     <td>{{value}}</td> 
    </tr> 
</table> 

<!-- RESULT : test-1 --> 
<table> 
    <tr> 
     <td>a</td> 
     <td>10</td> 
    </tr> 
    <tr> 
     <td>b</td> 
     <td>5</td> 
    </tr> 
    <tr> 
     <td>c</td> 
     <td>2</td> 
    </tr> 
</table> 

<!-- RESULT : test-2 --> 
<table> 
    <tr> 
     <td>b</td> 
     <td>5</td> 
    </tr> 
    <tr> 
     <td>a</td> 
     <td>10</td> 
    </tr> 
    <tr> 
     <td>c</td> 
     <td>2</td> 
    </tr> 
</table> 

Ví dụ với các đối tượng được sắp xếp:

<!-- MARKUP : with FILTER orderObject:<reverse?> --> 
<table> 
    <tr ng-repeat="(key, value) in data | orderObject"> 
     <td>{{key}}</td> 
     <td>{{value}}</td> 
    </tr> 
</table> 

<!-- RESULT : test-1 without reverse --> 
<table> 
    <tr> 
     <td>a</td> 
     <td>10</td> 
    </tr> 
    <tr> 
     <td>b</td> 
     <td>5</td> 
    </tr> 
    <tr> 
     <td>c</td> 
     <td>2</td> 
    </tr> 
</table> 

<!-- RESULT : test-2 with reverse --> 
<table> 
    <tr> 
     <td>c</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>b</td> 
     <td>5</td> 
    </tr> 
    <tr> 
     <td>a</td> 
     <td>10</td> 
    </tr> 
</table>