在 Angular 中按键对 JSON 响应进行排序

Question

好的，我已经在这个问题上停留了一段时间，找不到合适的解决方案。基本上，我已经按服务器端的日期对帖子进行了分组，并且我想按 Angular 中的递减日期对组进行排序。我假设自定义过滤器是可行的方法，但我无法让它工作。

以下是部分代码：

JSON 响应：

{"September 20th":[{"id":5,"title":"Test 1","url":"www.google.com","tagline":"Test tagline 1","created_at":"2014-09-20T19:30:44.672Z","updated_at":"2014-09-20T19:30:44.672Z","vote_count":5}],"September 21st":[{"id":6,"title":"Test 2","url":"www.google.com","tagline":"Test tagline 2","created_at":"2014-09-21T00:00:00.000Z","updated_at":"2014-09-20T19:32:41.409Z","vote_count":8}]}

HTML：

<section ng-controller='MainController'>
    <ul ng-repeat="(date, posts) in postList | filter?">
        <h1>{{ date }}</h1>
        <li ng-repeat='post in posts'>
            <p>{{ post.vote_count }}</p>
            <button ng-click='upvote(post)' ng-disabled='!currentUser || hasVoted(post.id)'></button>
            <a href="{{ post.url }}">{{ post.title }}</a>
        </li>
    </ul>  
</section>

这可以完美地显示信息，只是日期顺序不正确。

感谢您能给我的任何帮助！

Answer 1

这有点 hacky，但它确实有效：

Example

HTML：

<section ng-controller='MainController'>
<ul ng-repeat="posts in postList | orderObjectBy:'created_at':true">
    <h1>{{ posts.__originalKey }}</h1>
    <li ng-repeat='post in posts'>
        <p>{{ post.vote_count }}</p>
        <button ng-click='upvote(post)' ng-disabled='!currentUser || hasVoted(post.id)'></button>
        <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
</ul>  
</section>

自定义过滤器：

.filter('orderObjectBy', function() {
  return function(items, field, reverse) {
    var filtered = [];
    angular.forEach(items, function(item, key) {
      item.__originalKey=key;
      filtered.push(item);
    });
    filtered.sort(function (a, b) {
      return (a[field] > b[field] ? 1 : -1);
    });
    if(reverse) filtered.reverse();
    return filtered;
  };
})