AngularJS ordenando por propiedad

Lo que estoy tratando de hacer es ordenar algunos datos por propiedad. Aquí hay un ejemplo que debería funcionar, pero no funciona.

Parte 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>

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

}]);

Y el resultado:

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

... que en mi humilde opinión debería verse así:

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

¿Me perdí algo (aquí está JSFiddle listo para experimentar)?

El filtro orderBy de AngularJS solo admite matrices, sin objetos. Por lo tanto, debe escribir un filtro pequeño propio, que lo clasifica por usted.

O cambie el formato de los datos que maneja (si tiene influencia en eso). Una matriz que contiene objetos se puede ordenar por filtro nativo orderBy.

Aquí está mi filtro orderObjectBy para 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;
 }
});

Uso en su opinión:

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

El objeto necesita en este ejemplo un atributo de posición, pero tiene la flexibilidad de usar cualquier atributo en los objetos (que contengan un número entero), solo por definición a la vista.

Ejemplo JSON:

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

Aquí hay un violín que le muestra el uso: http://jsfiddle.net/4tkj8/1/

Es bastante fácil, hazlo así

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

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

No olvide que parseInt () solo funciona para valores enteros. Para ordenar los valores de cadena, debe intercambiar esto:

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

con este:

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

Como puede ver en el código de angular-JS ( https://github.com/angular/angular.js/blob/master/src/ng/filter/orderBy.js ) ng-repeat no funciona con objetos. Aquí hay un truco con 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;
        }
    }
}]);

de acuerdo con http://docs.angularjs.org/api/ng.filter:orderBy , orderBy ordena una matriz. En su caso, está pasando un objeto, por lo que tendrá que implementar su propia función de clasificación.

o pasar una matriz -

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

echa un vistazo a http://jsfiddle.net/qaK56/

Realmente debería mejorar su estructura JSON para solucionar su problema:

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

Entonces podrías hacer

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

El problema, creo, es que las variables (clave, valor) no están disponibles para el filtro orderBy, y de todos modos no debería almacenar datos en sus claves

Esto es lo que hice y funciona.
Solo utilicé un objeto en cadena.

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

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

si quisiera ordenar por texto lo haría

orderBy : 'mostRecent.text'

Agregaré mi versión mejorada del filtro que admita la siguiente sintaxis:

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

Gracias a Armin y Jason por sus respuestas en este hilo, y a Alnitak en este hilo .

La respuesta de Armin + una verificación estricta de tipos de objetos y claves no angulares como $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;
 }
})

Lo siguiente permite ordenar los objetos por clave O por clave dentro de un objeto .

En la plantilla puedes hacer algo como:

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

O incluso:

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

El filtro:

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