giá trị sắp xếp của một đối tượng băm trong ngRepeat - angularJS

Question

tôi có một đối tượng như thế này:

$scope.phones = new Object(); 
$scope.phones['id1'] = { 
    "name":"Phone Name1", 
    "dateReleased":"2012-1-09 15:48:24" 
}; 
$scope.phones['id2'] = { 
    "name": "Phone Name2", 
    "dateReleased":"2012-3-12 15:32:11" 
}; 
$scope.phones['id3'] = { 
    "name": "Phone Name3", 
    "dateReleased":"2012-2-10 13:53:32" 
}; 

Tôi đang hiển thị này sử dụng ngRepeat. Tôi không thể đặt hàng theo số dateReleased. Ngoài ra, đặt hàng ngược lại không hoạt động. ngRepeat tôi trông này:

<li ng-repeat="phone in phones | orderBy:dateReleased:true"> 
    <p>{{phone.name}}</p> 
    <p>{{phone.dateReleased}}</p> 
</li> 

Answer 1

Nếu bạn đánh dấu vào documentation nó nói rằng biểu thức trong orderBy có thể là một chức năng , một chuỗi hoặc một Mảng. Do đó, bạn cần ngàyĐã cho thuê là một chuỗi: 'dateReleased'

Ngoài ra, bạn cần điện thoại của mình Đối tượng là một mảng thực tế.

Hãy thử:

$scope.phones = [{ 
     "name":"Phone Name1", 
     "dateReleased":"2012-1-09 15:48:24" 
    },{ 
     "name": "Phone Name2", 
     "dateReleased":"2012-3-12 15:32:11" 
    },{ 
     "name": "Phone Name3", 
     "dateReleased":"2012-2-10 13:53:32" 
    }]; 

<li ng-repeat="phone in phones | orderBy:'dateReleased':true"> 
    <p>{{phone.name}}</p> 
    <p>{{phone.dateReleased}}</p> 
</li> 

Answer 2

Trước hết, bạn cần phải hiểu rằng ng:filter và ng:orderBy làm việc với Mảng (một bộ sưu tập có thứ tự các mặt hàng), nhưng bạn đang cố gắng sử dụng chúng trên Object (bộ sưu tập _un_ordered các mặt hàng). Một cách tiếp cận có thể là thu thập tất cả các đối tượng vào một mảng, sau đó tiến hành với ng-repeat trên nó thay thế. Như thế này:

<ul ng-init="phones = [ 
     {name:'Phone Name 1', dateReleased:'2011-1-09 15:48:24'} 
    , {name:'Phone Name 2', dateReleased:'2012-3-12 15:32:11'} 
    , {name:'Phone Name 3', dateReleased:'2012-2-10 13:53:32'}]; 
    pred = '-dateReleased';" > 
    <li ng-repeat="phone in phones | orderBy:pred"> 
     <p>{{phone.name}}</p> 
     <p>{{phone.dateReleased}}</p> 
    </li> 
</ul> 

Answer 3

Cả hai câu trả lời khác giúp bạn có được một phần con đường đó, nhưng không phải tất cả các cách ...

Bạn sẽ cần phải tạo ra một chức năng trên phạm vi của bạn có thể chuyển đổi đối tượng để một mảng như sau:

$scope.phonesArray = function() { 
    var result = []; 
    angular.forEach($scope.phones, function(phone, id) { 
     result.push(phone); 
    }); 
    return result; 
}; 

Sau đó, bạn muốn gọi đó là thay vì đối tượng của bạn trong ngRepeat của bạn:

<li ng-repeat="phone in phonesArray() | orderBy:'dateReleased':true"> 
    <p>{{phone.name}}</p> 
    <p>{{phone.dateReleased}}</p> 
</li> 

Ngoài ra: Lưu ý rằng 'dateReleased' là một chuỗi, do đó, nó biết $ eval rằng chuỗi tắt của mục hiện tại, nếu không nó sẽ kiểm tra parent $ scope.dateReleased, không tồn tại.

Here is a plunk for what I think you're trying to do

EDIT: Bạn cũng có thể "chuyển đổi" đối tượng đến một mảng và lưu trữ nó trên $ phạm vi, nếu bạn đang lo lắng về các chức năng để làm như vậy là quá "đắt", nhưng shouldn rằng không phải là một vấn đề, khi bạn đang phát triển một ứng dụng khách hàng cho một người dùng, và không phải là một ứng dụng máy chủ cho nhiều người dùng, có nghĩa là bạn có một căn phòng nhỏ lung linh cho "đắt tiền". (Dù sao cũng không được)

Answer 4

Trong khi ngRepeat có thể lặp lại một đối tượng băm, như $scope.phones trong ví dụ của bạn, bộ lọc tích hợp orderBy sẽ không hoạt động. Tôi tin rằng điều này là do cách thức các đối tượng được lưu trữ. Như người khác đã lưu ý, bạn cần phải chuyển đổi băm thành một mảng. Trong khi bạn có thể làm điều này bằng cách sử dụng các phương pháp được đề xuất ở trên, tôi thích làm điều đó bằng cách sử dụng một bộ lọc tùy chỉnh. Điều này mang lại cho tôi lợi ích của việc không phải thay đổi hàm băm của tôi một cách trực tiếp, và cũng cho phép tôi sử dụng lại bộ lọc với các băm khác.

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

Bộ lọc này chuyển đổi đối tượng thành mảng tiêu chuẩn và sắp xếp nó theo trường bạn chỉ định.Bạn có thể sử dụng bộ lọc orderObjectBy chính xác như orderBy, bao gồm giá trị boolean sau tên trường để chỉ định xem thứ tự có nên được đảo ngược hay không. Nói cách khác, false đang tăng dần, true giảm dần.

<li ng-repeat="phone in phones | orderObjectBy:'dateReleased':true"> 
    <p>{{phone.name}}</p> 
    <p>{{phone.dateReleased}}</p> 
</li> 

Tôi có một post on my blog về chủ đề này.