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

Javascript 如何使用带有键值对的ng repeat进行排序,javascript,angularjs,ionic-framework,ionic,Javascript,Angularjs,Ionic Framework,Ionic,我正试图按最后一条消息的顺序列出我的应用程序的一些消息线程(以便更新的消息位于顶部),但我在使用随附的orderBy过滤器时遇到了一些问题 下面是一个我们正在排序的对象的示例 $scope.messageThreads = { '102842': { name: 'John Doe', avatar: 'http://directlink/img.png', last_message: 5, messages: [

我正试图按最后一条消息的顺序列出我的应用程序的一些消息线程(以便更新的消息位于顶部),但我在使用随附的
orderBy
过滤器时遇到了一些问题

下面是一个我们正在排序的对象的示例

$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文档中,我们以键/值对的形式循环这些内容,如下所示:

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

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

-thread.last_message
更改为
thread.last_message
不会解决此问题

这里有一个解决方案,但其中的一个问题是,它将items对象转换为数组,您将不再能够访问“关联数组”的键,就像您对items片段中的(键,项)所做的那样

   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>

线程ID:{{Thread.key}}-最后一条消息:{{Thread.Last_message}

是否可以在此处粘贴完整的代码。基本上,您无法将数据按结构化方式粘贴到此处。“您需要注意,JavaScript规范并没有定义为对象返回的键的顺序。”以及进一步的:“我们现在依赖于浏览器在myObj中为键运行
时返回的顺序。看起来浏览器通常遵循按照定义键的顺序提供键的策略…”.  “如果不希望这样,建议的解决方法是将对象转换为数组…”我将如何保留密钥,因为密钥对于应用程序中的功能至关重要。例如,ng repeated div上还有一个
ng click
,它会根据键打开一个新页面`ng click='openThread({{id}})'
<div ng-repeat="(id, thread) in messageThreads | orderObjectBy:'last_message':true">
 Thread ID: {{thread.key}} - Last message: {{thread.last_message}}
</div>