问与答 如何在AngularJS中的ng-repeat中排序对象数据源?

ladd · 2020-03-21 02:16:31 · 热度: 148

假设我有以下用户:

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

我想创建一个具有以下选项的ui-select2

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

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

我使用ui-select2语法尝试了以下操作,但不起作用:

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

这里有现场示例。

我想念什么?

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

猜你喜欢:
共收到 3 条回复
sebastian #1 · 2020-03-21 02:16:31

虽然您会在链接中看到作者的答案引用的主题,但我认为最好将上述解决方法之一放在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>

这是矮人。

请注意,id过滤器将name作为其参数,而不是user.name

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

在您在答案中提到的链接中,还提出了一些解决方案,这些解决方案可以在用户对象中即时创建id属性,但是我觉得这种方法比较麻烦(以引入数据复制为代价)。

leland #2 · 2020-03-21 02:16:33

好的,我找到了答案:

它尚未实现:(

jerald #3 · 2020-03-21 02:16:34

添加到接受的答案并查看您的数据格式,您应该将数据转换为

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;
    }
});
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册