如何在AngularJS中对ng-repeat中的对象数据源进行排序？

Question

假设我有以下用户：

$scope.users = {
  "2": {
    email: 'john@gmail.com',
    name: 'John'
  },
  "3": {
    email: 'elisa@gmail.com',
    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>

Live example here.

我遗漏了什么？

请不要建议使用ng-options的解决方案，因为我使用的ui-select2与ng-options不兼容。

Answer 1

虽然你会在链接中作者的答案引用的帖子中看到这一点，但我认为把提到的变通方法之一放在上面会很好：

这在技术上确实没有实现，但如果您愿意稍微更改一下数据模型，有一个简单的变通办法:使用自定义过滤器生成对象属性的数组(不使用替换的)。如果你将key字段添加到对象中(在上面的例子中是“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: "john@gmail.com", id: 1},
    2: {name: "Elisa", email: "elisa@gmail.com", 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属性添加到您的对象中确实会造成与其在包含对象中的键不匹配的可能性。

在您的答案中提到的链接中，还有一些建议的解决方案可以在user对象中动态创建id属性，但我觉得这种方法不那么麻烦(以引入数据复制为代价)。

Answer 2

好了，我找到了答案：

It is not implemented yet :(

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