Sắp xếp AngularJS theo thuộc tính

Những gì tôi đang cố gắng làm là sắp xếp một số dữ liệu theo thuộc tính. Đây là ví dụ mà tôi nghĩ nên làm việc nhưng nó không.

Phần HTML:

<div ng-app='myApp'>
    <div ng-controller="controller">
    <ul>
        <li ng-repeat="(key, value) in testData | orderBy:'value.order'">
            {{value.order}}. {{key}} -> {{value.name}}
        </li>
    </ul>
    </div>
</div>

Phần JS:

var myApp = angular.module('myApp', []);

myApp.controller('controller', ['$scope', function ($scope) {

    $scope.testData = {
        C: {name:"CData", order: 1},
        B: {name:"BData", order: 2},
        A: {name:"AData", order: 3},
    }

}]);

Và kết quả:

3. A -> AData
4. B -> BData
5. C -> CData

... IMHO đó sẽ trông như thế này:

1. C -> CData
2. B -> BData
3. A -> AData

Tôi có bỏ lỡ điều gì không ( JSFiddle ở đây đã sẵn sàng để thử nghiệm)?

Bộ lọc orderBy của AngularJS chỉ hỗ trợ mảng - không có đối tượng. Vì vậy, bạn phải viết một bộ lọc nhỏ riêng để phân loại cho bạn.

Hoặc thay đổi định dạng dữ liệu mà bạn xử lý (nếu bạn có ảnh hưởng đến điều đó). Một mảng chứa các đối tượng có thể sắp xếp theo thứ tự gốc bằng bộ lọc.

Đây là bộ lọc orderObjectBy của tôi cho AngularJS:

app.filter('orderObjectBy', function(){
 return function(input, attribute) {
    if (!angular.isObject(input)) return input;

    var array = [];
    for(var objectKey in input) {
        array.push(input[objectKey]);
    }

    array.sort(function(a, b){
        a = parseInt(a[attribute]);
        b = parseInt(b[attribute]);
        return a - b;
    });
    return array;
 }
});

Cách sử dụng theo quan điểm của bạn:

<div class="item" ng-repeat="item in items | orderObjectBy:'position'">
    //...
</div>

Trong ví dụ này, đối tượng cần thuộc tính vị trí, nhưng bạn có thể linh hoạt sử dụng bất kỳ thuộc tính nào trong các đối tượng (chứa một số nguyên), chỉ theo định nghĩa trong chế độ xem.

JSON mẫu:

{
    "123": {"name": "Test B", "position": "2"},
    "456": {"name": "Test A", "position": "1"}
}

Đây là một fiddle hiển thị cho bạn cách sử dụng: http://jsfiddle.net/4tkj8/1/

Nó khá dễ dàng, chỉ cần làm như thế này

$scope.props = [{order:"1"},{order:"5"},{order:"2"}]

ng-repeat="prop in props | orderBy:'order'"

Đừng quên rằng parseInt () chỉ hoạt động cho các giá trị Số nguyên. Để sắp xếp các giá trị chuỗi, bạn cần hoán đổi điều này:

array.sort(function(a, b){
  a = parseInt(a[attribute]);
  b = parseInt(b[attribute]);
  return a - b;
});

Với cái này:

array.sort(function(a, b){
  var alc = a[attribute].toLowerCase(),
      blc = b[attribute].toLowerCase();
  return alc > blc ? 1 : alc < blc ? -1 : 0;
});

Như bạn có thể thấy trong mã của angle-JS ( https://github.com/angular/angular.js/blob/master/src/ng/filter/orderBy.js ) ng-repeat không hoạt động với các đối tượng. Đây là một bản hack với sortFunction.

http://jsfiddle.net/sunnycpp/qaK56/33/

<div ng-app='myApp'>
    <div ng-controller="controller">
    <ul>
        <li ng-repeat="test in testData | orderBy:sortMe()">
            Order = {{test.value.order}} -> Key={{test.key}} Name=:{{test.value.name}}
        </li>
    </ul>
    </div>
</div>

myApp.controller('controller', ['$scope', function ($scope) {

    var testData = {
        a:{name:"CData", order: 2},
        b:{name:"AData", order: 3},
        c:{name:"BData", order: 1}
    };
    $scope.testData = _.map(testData, function(vValue, vKey) {
        return { key:vKey, value:vValue };
    }) ;
    $scope.sortMe = function() {
        return function(object) {
            return object.value.order;
        }
    }
}]);

theo http://docs.angularjs.org/api/ng.filter:orderBy , orderBy sắp xếp một mảng. Trong trường hợp của bạn, bạn đang chuyển một đối tượng, vì vậy Bạn sẽ phải triển khai chức năng sắp xếp của riêng Bạn.

hoặc truyền một mảng -

$scope.testData = {
    C: {name:"CData", order: 1},
    B: {name:"BData", order: 2},
    A: {name:"AData", order: 3},
}

hãy xem tại http://jsfiddle.net/qaK56/

Bạn thực sự nên cải thiện cấu trúc JSON của mình để khắc phục sự cố của mình:

$scope.testData = [
   {name:"CData", order: 1},
   {name:"BData", order: 2},
   {name:"AData", order: 3},
]

Sau đó, bạn có thể làm

<li ng-repeat="test in testData | orderBy:order">...</li>

Tôi nghĩ rằng vấn đề là các biến (khóa, giá trị) không có sẵn cho bộ lọc orderBy và bạn không nên lưu trữ dữ liệu trong các khóa của mình

Đây là những gì tôi đã làm và nó hoạt động.
Tôi vừa sử dụng một đối tượng được xâu chuỗi.

$scope.thread = [ 
  {
    mostRecent:{text:'hello world',timeStamp:12345678 } 
    allMessages:[]
  }
  {MoreThreads...}
  {etc....}
]

<div ng-repeat="message in thread | orderBy : '-mostRecent.timeStamp'" >

nếu tôi muốn sắp xếp theo văn bản, tôi sẽ làm

orderBy : 'mostRecent.text'

Tôi sẽ thêm phiên bản bộ lọc đã nâng cấp có thể hỗ trợ cú pháp tiếp theo:

ng-repeat="(id, item) in $ctrl.modelData | orderObjectBy:'itemProperty.someOrder':'asc'

app.filter('orderObjectBy', function(){

         function byString(o, s) {
            s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
            s = s.replace(/^\./, '');           // strip a leading dot
            var a = s.split('.');
            for (var i = 0, n = a.length; i < n; ++i) {
                var k = a[i];
                if (k in o) {
                    o = o[k];
                } else {
                    return;
                }
            }
            return o;
        }

        return function(input, attribute, direction) {
            if (!angular.isObject(input)) return input;

            var array = [];
            for(var objectKey in input) {
                if (input.hasOwnProperty(objectKey)) {
                    array.push(input[objectKey]);
                }
            }

            array.sort(function(a, b){
                a = parseInt(byString(a, attribute));
                b = parseInt(byString(b, attribute));
                return direction == 'asc' ? a - b : b - a;
            });
            return array;
        }
    })

Cảm ơn Armin và Jason vì câu trả lời của họ trong chủ đề này và Alnitak trong chủ đề này .

Câu trả lời của Armin + kiểm tra chặt chẽ các loại đối tượng và các phím không góc cạnh như $resolve

app.filter('orderObjectBy', function(){
 return function(input, attribute) {
    if (!angular.isObject(input)) return input;

    var array = [];
    for(var objectKey in input) {
      if (typeof(input[objectKey])  === "object" && objectKey.charAt(0) !== "$")
        array.push(input[objectKey]);
    }

    array.sort(function(a, b){
        a = parseInt(a[attribute]);
        b = parseInt(b[attribute]);
        return a - b;
    });

    return array;
 }
})

Điều sau đây cho phép sắp xếp thứ tự của các đối tượng theo khóa HOẶC theo một khóa trong một đối tượng .

Trong mẫu, bạn có thể làm một số việc như:

    <li ng-repeat="(k,i) in objectList | orderObjectsBy: 'someKey'">

Hoặc thậm chí:

    <li ng-repeat="(k,i) in objectList | orderObjectsBy: 'someObj.someKey'">

Bộ lọc:

app.filter('orderObjectsBy', function(){
 return function(input, attribute) {
    if (!angular.isObject(input)) return input;

    // Filter out angular objects.
    var array = [];
    for(var objectKey in input) {
      if (typeof(input[objectKey])  === "object" && objectKey.charAt(0) !== "$")
        array.push(input[objectKey]);
    }

    var attributeChain = attribute.split(".");

    array.sort(function(a, b){

      for (var i=0; i < attributeChain.length; i++) {
        a = (typeof(a) === "object") && a.hasOwnProperty( attributeChain[i]) ? a[attributeChain[i]] : 0;
        b = (typeof(b) === "object") && b.hasOwnProperty( attributeChain[i]) ? b[attributeChain[i]] : 0;
      }

      return parseInt(a) - parseInt(b);
    });

    return array;
 }
})