Подтвердить что ты не робот

Как отсортировать источник данных объекта в ng-repeat в AngularJS?

Предположим, у меня есть следующие пользователи:

$scope.users = {
  "2": {
    email: '[email protected]',
    name: 'John'
  },
  "3": {
    email: '[email protected]',
    name: 'Elisa'
  }
}

Я хотел бы создать <select> со следующими параметрами:

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

Другими словами, пользователи должны сортироваться по имени.

Я пробовал использовать синтаксис (key, value) in expression, но он не работает:

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

Здесь показан живой пример.

Что мне не хватает?

Пожалуйста, не предлагайте решения с ng-options, поскольку я использую ui-select2, что несовместимо с ng-options.

4b9b3361

Ответ 1

Пока вы видите это в потоке, автор отвечает на ссылки в ссылке, я подумал, что было бы неплохо поставить один из упомянутых обходных решений на SO:

Верно, что это технически не реализовано, но есть легкая работа, если вы хотите немного изменить свою модель данных: используйте настраиваемый фильтр для создания массива свойств объекта (без). Если вы добавите поле ключа к объектам ( "id" в приведенном выше случае), вы сможете получить поведение, которое вы ищете:

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

Здесь можно указать директиву ng-repeat:

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

И здесь plunkr.

Обратите внимание, что фильтр orderBy принимает name как его параметр, а не user.name.

К сожалению, добавление свойства id к вашим объектам создает потенциал для несоответствия с ним в содержащем объекте.

В ссылке, упомянутой в вашем ответе, также предлагаются предлагаемые решения, которые создают свойство id в объектах пользователя "на лету", но я чувствую, что этот подход немного менее беспорядочен (за счет введения данных репликации).

Ответ 3

Добавляя к принятому ответу и видя ваш формат данных, вы должны преобразовать свои данные как

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