Jak posortować źródło danych obiektu w ng-repeat w AngularJS?

Question

Załóżmy, że mam następujących użytkowników:

$scope.users = { 
    "2": { 
    email: 'john@gmail.com', 
    name: 'John' 
    }, 
    "3": { 
    email: 'elisa@gmail.com', 
    name: 'Elisa' 
    } 
} 

Chciałbym stworzyć <select> z następujących opcji:

<option value="3">Elisa</option> 
<option value="2">John</option> 

Innymi słowy, użytkownicy powinni być sortowane według nazwy.

Próbowałem następujących używając składni (key, value) in expression, ale to nie działa:

<option ng-repeat="(user_id, user) in users | orderBy:'user.name'" 
     value="{{ user.id }}"> 
    {{ user.name }} 
</option> 

Live example here.

Czego mi brakuje?

Nie sugeruj rozwiązań z ng-options, ponieważ używam ui-select2, który jest niezgodny z ng-options.

Answer 1

Chociaż można zobaczyć to w wątku referencje odpowiedź autora w link, myślałem, że byłoby dobrze, aby umieścić jedną z wymienionych obejścia Na przykład:

To prawda, że ​​nie jest to technicznie zaimplementowane, ale jeśli chcesz zmienić nieco model danych, możesz łatwo wykonać pracę: użyj niestandardowego filtru, aby wygenerować tablicę właściwości obiektu (bez wymiany). Jeśli dodać pole klucza do obiektów („id” w powyższym przypadku), powinieneś być w stanie uzyskać zachowanie szukasz:

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: "john@gmail.com", id: 1}, 
    2: {name: "Elisa", email: "elisa@gmail.com", id: 2} 
}; 

Oto dyrektywa ng-repeat, które mogą być wykorzystane:

<option value="{{user.id}}" ng-repeat="user in users | toArray | orderBy:'name'">{{user.name}}</option> 

A tutaj jest plunkr.

Należy zauważyć, że filtr orderBy przyjmuje jako parametr name, a nie user.name.

Niestety, dodanie właściwości id do twoich obiektów powoduje potencjalne niedopasowanie za pomocą swojego klucza w obiekcie zawierającym.

W linku, o którym wspomniałeś w swojej odpowiedzi, są również proponowane rozwiązania, które tworzą właściwość id w obiektach użytkownika w locie, ale wydaje mi się, że to podejście jest nieco mniej kłopotliwe (kosztem wprowadzenia replikacji danych).

Answer 2

OK, znalazłem odpowiedź:

It is not implemented yet :(

Answer 3

Dodawanie do zaakceptowanej odpowiedzi i widząc swój format danych, należy przekształcić swoje dane jako

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