94

我想做的是按属性对一些数据进行排序。这是我认为应该可以工作的示例，但事实并非如此。

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

}]);

结果：

  1. A -> 数据
  2. B -> B数据
  3. C -> C数据

...恕我直言，应该是这样的：

  1. C -> C数据
  2. B -> B数据
  3. A -> 数据

我错过了什么吗（这里已经准备好JSFiddle进行实验了）？

4

10 回答 10

148

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/

于 2013-08-12T12:26:06.250 回答
30

很简单，就这样吧

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

ng-repeat="prop in props | orderBy:'order'"
于 2013-12-05T11:07:01.113 回答
7

不要忘记 parseInt() 仅适用于整数值。要对字符串值进行排序，您需要交换它：

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;
});
于 2013-09-05T17:22:29.557 回答
6

正如您在 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;
        }
    }
}]);
于 2013-01-23T12:02:47.093 回答
4

根据http://docs.angularjs.org/api/ng.filter:orderBy， orderBy 对数组进行排序。在您的情况下，您正在传递一个对象，因此您必须实现自己的排序功能。

或传递一个数组 -

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

看看http://jsfiddle.net/qaK56/

于 2013-01-23T11:39:11.113 回答
3

你真的应该改进你的 JSON 结构来解决你的问题：

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

然后你可以做

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

我认为，问题在于 orderBy 过滤器无法使用 (key, value) 变量，并且无论如何您都不应该将数据存储在密钥中

于 2014-04-17T23:01:29.810 回答
2

这是我所做的，它有效。
我只是使用了一个字符串化的对象。

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

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

如果我想按文本排序，我会做 

orderBy : 'mostRecent.text'
于 2014-09-24T16:30:48.463 回答
2

我将添加我的升级版过滤器，它能够支持下一个语法： 

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

感谢 Armin 和 Jason 在此线程中的回答，以及 Alnitak 在此线程中的回答。

于 2016-08-18T17:16:27.880 回答
1

以下允许通过 key OR按object 中的 key 对对象进行排序。

在模板中，您可以执行以下操作：

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

甚至：

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

过滤器：

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;
 }
})
于 2016-01-17T00:06:53.347 回答
1

Armin 的回答 + 对对象类型和非角度键的严格检查，例如$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;
 }
})
于 2015-08-07T15:48:01.067 回答