AngularJS按属性排序

Question

我想要做的是按属性排序一些数据.这是我应该努力的例子,但事实并非如此.

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>

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},
    }

}]);

结果如下:

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

......恕我直言应该是这样的:

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

我错过了什么(这里准备JSFiddle进行实验)？

Answer 1

AngularJS的orderBy过滤器只支持数组 - 没有对象.所以你必须编写一个自己的小过滤器,为你做排序.

或者更改您处理的数据格式(如果您对此有影响).包含对象的数组可由本机orderBy过滤器排序.

这是我对AngularJS的orderObjectBy过滤器:

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

在您的视图中使用:

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

在此示例中,对象需要一个位置属性,但您可以灵活地使用对象中的任何属性(包含整数),只需在视图中定义即可.

示例JSON:

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

这是一个小提琴,向您展示用法:http: //jsfiddle.net/4tkj8/1/

Answer 2

这很简单,就这样做

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

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

Answer 3

不要忘记parseInt()仅适用于Integer值.要对字符串值进行排序,您需要交换它:

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

有了这个:

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

Answer 4

正如您在angular-JS(https://github.com/angular/angular.js/blob/master/src/ng/filter/orderBy.js)的代码中所看到的,ng-repeat不适用于对象.这是一个带sortFunction的hack.

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;
        }
    }
}]);