如何使用带有键|值对的 ng-repeat 进行排序

Question

我试图按照最后一条消息的顺序为我的应用程序列出一些消息传递线程（以便较新的消息位于顶部）并且我在使用 orderBy 过滤器时遇到了一些问题Angular 附带的。

这是我们正在排序的对象的示例。

$scope.messageThreads = { 
    '102842': {
        name: 'John Doe',
        avatar: 'http://directlink/img.png',
        last_message: 5,
        messages: [ 
            { content: 'Hello!', from: '102842', to: '312124', date: 5 }
        ]
    },
    '59251275': {
        name: 'Thomas Doe',
        avatar: 'http://directlink/img.png',
        last_message: 28,
        messages: [ 
           { content: 'Hey jack', from: '59251275', to: '1231251', date: 12 },
           { content: 'Hey Thomas', from: '1231251', to: '59251275', date: 28 }
        ]
    }
}

存储在一个名为 messageThreads 的简单对象中。

在 HTML 文档中，我们以 Key/Value 对循环遍历它们，如下所示：

<div ng-repeat="(id, thread) in messageThreads | orderBy: '-thread.last_message'">
    Thread ID: {{id}} - Last message: {{thread.last_message}}
</div>

不幸的是，它根本没有对消息进行排序。显示的输出是：

Thread ID: 102842 - Last message: 5
Thread ID: 59251275 - Last message: 28

不过，应该是：

Thread ID: 59251275 - Last message: 28
Thread ID: 102842 - Last message: 5

将 -thread.last_message 更改为 thread.last_message 并不能解决问题。

Answer 1

这是解决方案，但一个问题是它将项目对象转换为数组，您将无法再访问“关联数组”的键，因为你用 items snippet

中的 (key, item)

   app.filter('orderObjectBy', function() {
  return function(items, field, reverse) {
    var filtered = [];
    angular.forEach(items, function(item,key) {
      **item.key = key;** //Here you can push your key to get in returned Object
      filtered.push(item);
    });
    filtered.sort(function (a, b) {
      return (a[field] > b[field] ? 1 : -1);
    });
    if(reverse) filtered.reverse();
    return filtered;
  };
});

在HTML中：

<div ng-repeat="(id, thread) in messageThreads | orderObjectBy:'last_message':true">
 Thread ID: {{thread.key}} - Last message: {{thread.last_message}}
</div>

如何使用带有键|值对的 ng-repeat 进行排序

How to sort using ng-repeat with a key|value pair

javascript

angularjs

ionic-framework

ionic