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

Mis*_*hko 48 angularjs angularjs-ng-repeat angularjs-orderby

假设我有以下用户:

$scope.users = {
  "2": {
    email: 'john@gmail.com',
    name: 'John'
  },
  "3": {
    email: 'elisa@gmail.com',
    name: 'Elisa'
  }
}
Run Code Online (Sandbox Code Playgroud)

我想<select>用以下选项创建一个:

<option value="3">Elisa</option>
<option value="2">John</option>
Run Code Online (Sandbox Code Playgroud)

换句话说,用户应按名称排序.

我尝试了以下使用(key, value) in expression语法,但它不起作用:

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

这里有实例.

我错过了什么?

请不要ng-options使用与我ui-select2不相容的解决方案ng-options.

mhe*_*ess 55

虽然你会在链接中看到作者的答案引用的帖子,但我认为在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: "john@gmail.com", id: 1},
    2: {name: "Elisa", email: "elisa@gmail.com", id: 2}
};
Run Code Online (Sandbox Code Playgroud)

这是可以使用的ng-repeat指令:

<option value="{{user.id}}" ng-repeat="user in users | toArray | orderBy:'name'">{{user.name}}</option>
Run Code Online (Sandbox Code Playgroud)

这是傻瓜.

请注意,orderBy过滤器name不作为参数user.name.

不幸的是,将id属性添加到对象中确实可能会导致与包含对象中的键不匹配.

在您在答案中提到的链接中,还提出id了即时创建用户对象属性的解决方案,但我觉得这种方法稍微不那么混乱(以引入数据复制为代价).


Mis*_*hko 9

好的,我找到了答案:

它还没有实现:(

  • 值得一提的是,根据您引用的主题,没有计划实施它. (9认同)