使用angularjs的facebook页面图形注释的顺序

Question

我在http://plnkr.co/edit/bMykiulfzN8tscqfySFA?p=preview中的angularjs循环中放置了Facebook帖子的评论

数据来自https://graph.facebook.com/618857251494402_804740479572744?access_token=343397335795533|zjYg_5xoTUepxDrTXLYYQR6VDrc

<table class="table table-striped">
  <thead>
    <tr>
      <th>comment</th>
      <th>date</th>
    </tr>
  </thead>

  <tbody>
    <tr ng-repeat="resource in employees | limitTo:2 | orderBy:'created_time':true">
      <td>{{ resource.message }}</td>
      <td>{{ resource.created_time }}</td>
    </tr>
  </tbody>
</table>

问题是顺序：我想要时间中的最后两个注释，但是当我输入limitTo：2时，它显示了两个第一个注释...那么，如何用limitTo获得两个最后的注释？

Answer 1

在角度过滤器组合在一起时，它们像一条链一样工作，这意味着后续过滤器将获得前一个过滤器的结果（在同一表达式中）以与数据集一起使用。 您的情况是将初始数据集限制为2个记录，然后通过creationDate对2个记录进行排序。 因此，您应该将limitTo:2放置在orderBy过滤器之后。

尝试：-

<tr ng-repeat="resource in employees | orderBy:'created_time':true | limitTo:2">

当我们已经提供了一个经过良好测试且效率更高（可能）的角度滤镜时，您无需添加其他滤镜或重新设计砂轮。

另外请注意，如果您始终显示静态数量的最新项目（即，项目或限制在没有某些触发器的交互作用下不会动态更改），则最好将过滤器移至控制器逻辑（初始化或在特定位置进行）操作方法（如点击事件等）并与过滤后的数据绑定。 DOM过滤器（或视图上的过滤器）价格昂贵，并且会增加摘要周期。

演示

 angular.module('app', []).controller('ctrl', function($scope){ $scope.employees = getData().comments.data; function getData() { return { "id": "618857251494402_804740479572744", "from": { "category": "Community", "name": "Sexe, Clashs, Batman, Becs Bunsen & Soucoupes Volantes : LE MONDE DU RAT", "id": "618857251494402" }, "message": "POST", "privacy": { "value": "" }, "type": "status", "status_type": "mobile_status_update", "created_time": "2014-12-18T00:17:36+0000", "updated_time": "2014-12-18T19:23:14+0000", "is_hidden": true, "comments": { "data": [ { "id": "804740479572744_804740636239395", "from": { "category": "Community", "name": "Sexe, Clashs, Batman, Becs Bunsen & Soucoupes Volantes : LE MONDE DU RAT", "id": "618857251494402" }, "message": "test1 (first in the time)", "can_remove": false, "created_time": "2014-12-18T00:18:25+0000", "like_count": 0, "user_likes": false }, { "id": "804740479572744_804779462902179", "from": { "category": "Reference website", "name": "Adopte Un Rat - adopteunrat.com", "id": "809567735752704" }, "message": "test", "can_remove": false, "created_time": "2014-12-18T01:27:27+0000", "like_count": 0, "user_likes": false }, { "id": "804740479572744_804967526216706", "from": { "category": "Community", "name": "Sexe, Clashs, Batman, Becs Bunsen & Soucoupes Volantes : LE MONDE DU RAT", "id": "618857251494402" }, "message": "test3", "can_remove": false, "created_time": "2014-12-18T13:31:22+0000", "like_count": 0, "user_likes": false }, { "id": "804740479572744_805082169538575", "from": { "category": "Community", "name": "Sexe, Clashs, Batman, Becs Bunsen & Soucoupes Volantes : LE MONDE DU RAT", "id": "618857251494402" }, "message": "test4 (last in the time)", "can_remove": false, "created_time": "2014-12-18T19:23:14+0000", "like_count": 0, "user_likes": false } ], "paging": { "cursors": { "after": "WTI5dGJXVnVkRjlqZFhKemIzSTZPREExTURneU1UWTVOVE00TlRjMU9qRTBNVGc1TXpBMU9UUTZMVEU9", "before": "WTI5dGJXVnVkRjlqZFhKemIzSTZPREEwTnpRd05qTTJNak01TXprMU9qRTBNVGc0TmpFNU1EWTZMVEU9" } } } } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <table class="table table-striped"> <thead> <tr> <th>comment</th> <th>date</th> </tr> </thead> <tbody> <tr ng-repeat="resource in employees | orderBy:'created_time':true | limitTo:2"> <td>{{ resource.message }}</td> <td>{{ resource.created_time }}</td> </tr> </tbody> </table> </div>