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

发布时间：2020-12-17 08:57:42 所属栏目：安全来源：网络整理

导读：假设我有以下用户： $scope.users = { "2": { email: 'john@gmail.com',name: 'John' },"3": { email: 'elisa@gmail.com',name: 'Elisa' }} 我想创建一个 select具有以下选项： option value="3"Elisa/optionoption value="2"John/option 换句话说，用户应该

假设我有以下用户：

$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选项不兼容。

虽然你会在线程中看到这个作者的回答引用了一个链接，我认为最好在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}
};

下面是可以使用的ng-repeat指令：

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

这里是plunkr。

注意，orderBy过滤器将name作为其参数，而不是user.name。

不幸的是，将id属性添加到您的对象会创建与其在包含对象中的键不匹配的可能性。

在你的答案中提到的链接中，还提出了在用户对象中即时创建id属性的解决方案，但我觉得这种方法有点不太麻烦(以引入数据复制为代价)。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!