如何使用键值对使用ng-repeat进行排序

时间:2015-12-09 10:54:13

标签: javascript angularjs ionic-framework ionic

我试图按照上一条消息的顺序为我的应用程序列出一些消息传递线程(以便更新的消息在顶部)并且我在使用{{1}时遇到一些问题} Angular附带的过滤器。

以下是我们排序的对象的示例。

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 } ] } } 的简单对象中。

在HTML文档中,我们在键/值对中循环这些,如下所示:

messageThreads

不幸的是,它根本没有订购消息。显示的输出是:

<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并不能解决问题。

1 个答案:

答案 0 :(得分:3)

这是解决方案,但有一个问题是它将items对象转换为数组,您将无法再访问“关联数组”的键,就像使用(项目片段中的键,项目

<figure>
    <img src="<!--?atec?-->" alt="">
    <figcaption>Caption</figcaption>
</figure>

在HTML中:

   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;
  };
});