Làm thế nào để sắp xếp nguồn dữ liệu đối tượng trong ng-lặp trong AngularJS?

Question

Giả sử tôi có người dùng sau:

$scope.users = { 
    "2": { 
    email: 'john@gmail.com', 
    name: 'John' 
    }, 
    "3": { 
    email: 'elisa@gmail.com', 
    name: 'Elisa' 
    } 
} 

Tôi muốn tạo ra một <select> với các tùy chọn sau:

<option value="3">Elisa</option> 
<option value="2">John</option> 

Nói cách khác, người sử dụng nên được sắp xếp theo tên.

Tôi đã thử các sau đây bằng cách sử dụng cú pháp (key, value) in expression, nhưng nó không hoạt động:

<option ng-repeat="(user_id, user) in users | orderBy:'user.name'" 
     value="{{ user.id }}"> 
    {{ user.name }} 
</option> 

Live example here.

tôi thiếu gì?

Vui lòng không đề xuất giải pháp với ng-options khi tôi sử dụng ui-select2 không tương thích với ng-options.

Answer 1

Trong khi bạn sẽ thấy điều này trong các chủ đề tài liệu tham khảo câu trả lời của tác giả trong một liên kết, tôi nghĩ rằng nó sẽ là tốt để đưa lên một trong những cách giải quyết đề cập Đúng là điều này không được thực hiện về mặt kỹ thuật, nhưng có một công việc dễ dàng xung quanh nếu bạn sẵn sàng thay đổi mô hình dữ liệu của mình một chút: sử dụng bộ lọc tùy chỉnh để tạo một mảng các thuộc tính của đối tượng (mà không cần thay thế). Nếu bạn thêm các lĩnh vực trọng điểm để các đối tượng ("id" trong trường hợp ở trên), bạn sẽ có thể để có được hành vi của mình tìm kiếm

app.filter("toArray", function(){ 
    return function(obj) { 
     var result = []; 
     angular.forEach(obj, function(val, key) { 
      result.push(val); 
     }); 
     return result; 
    }; 
}); 
... 

$scope.users = { 
    1: {name: "John", email: "john@gmail.com", id: 1}, 
    2: {name: "Elisa", email: "elisa@gmail.com", id: 2} 
}; 

Dưới đây là chỉ thị ng-repeat mà có thể được sử dụng:

<option value="{{user.id}}" ng-repeat="user in users | toArray | orderBy:'name'">{{user.name}}</option> 

Và đây là plunkr.

Lưu ý rằng bộ lọc orderBy mất name làm thông số của nó chứ không phải user.name.

Thật không may, việc thêm thuộc tính id vào đối tượng của bạn sẽ tạo ra khả năng không phù hợp với khóa của nó trong đối tượng chứa.

Trong liên kết bạn đã đề cập trong câu trả lời, cũng có các giải pháp đề xuất tạo thuộc tính id trong đối tượng người dùng, nhưng tôi cảm thấy cách tiếp cận này hơi lộn xộn hơn một chút (với chi phí giới thiệu sao chép dữ liệu).

Answer 2

OK, tôi tìm thấy câu trả lời:

It is not implemented yet :(

Answer 3

Thêm vào câu trả lời chấp nhận và nhìn thấy định dạng dữ liệu của bạn, bạn nên chuyển đổi dữ liệu của bạn như

app.filter('myFilterUsers',function(){ 
    return function(data) 
    { 
     var newRes = []; 
     angular.forEach(data,function(val,key){ 
      val["id"] = key; //Add the ID in the JSON object as you need this as well. 
      newRes.push(val); 
     }); 
     return newRes; 
    } 
});