angularjs - contador - ng-repeat example
¿Cómo ordenar el origen de datos del objeto en ng-repeat en AngularJS? (3)
Supongamos que tengo los siguientes usuarios:
$scope.users = {
"2": {
email: ''[email protected]'',
name: ''John''
},
"3": {
email: ''[email protected]'',
name: ''Elisa''
}
}
Me gustaría crear un <select> con las siguientes opciones:
<option value="3">Elisa</option>
<option value="2">John</option>
En otras palabras, los usuarios deben estar ordenados por nombre.
Intenté lo siguiente utilizando la (key, value) in expression sintaxis de (key, value) in expression , pero no funciona:
<option ng-repeat="(user_id, user) in users | orderBy:''user.name''"
value="{{ user.id }}">
{{ user.name }}
</option>
¿Qué me estoy perdiendo?
No sugiera soluciones con ng-options ya que uso ui-select2 que es incompatible con ng-options .
Agregando a la respuesta aceptada y viendo su formato de datos, debe transformar sus datos como
app.filter(''myFilterUsers'',function(){
return function(data)
{
var newRes = [];
angular.forEach(data,function(val,key){
val["id"] = key; //Add the ID in the JSON object as you need this as well.
newRes.push(val);
});
return newRes;
}
});
OK, encontré la respuesta:
Si bien vería esto en el hilo de las referencias de respuestas del autor en un enlace, pensé que sería bueno poner una de las soluciones mencionadas en SO:
Es cierto que esto no está implementado técnicamente, pero hay una solución fácil si está dispuesto a cambiar un poco su modelo de datos: use un filtro personalizado para generar una matriz de las propiedades del objeto ( sin reemplazo). Si agrega el campo clave a los objetos ("id" en el caso anterior), debería poder obtener el comportamiento que está buscando:
app.filter("toArray", function(){
return function(obj) {
var result = [];
angular.forEach(obj, function(val, key) {
result.push(val);
});
return result;
};
});
...
$scope.users = {
1: {name: "John", email: "[email protected]", id: 1},
2: {name: "Elisa", email: "[email protected]", id: 2}
};
Aquí está la directiva ng-repeat que podría usarse:
<option value="{{user.id}}" ng-repeat="user in users | toArray | orderBy:''name''">{{user.name}}</option>
Y aquí está el plunkr .
Observe que el filtro orderBy toma el name como parámetro y no el nombre de user.name .
Desafortunadamente, agregar la propiedad id a sus objetos crea un potencial de desajuste con su clave en el objeto contenedor.
En el enlace que mencionó en su respuesta, también se proponen soluciones que crean la propiedad id en los objetos de usuario sobre la marcha, pero creo que este enfoque es un poco menos complicado (a costa de introducir la replicación de datos).