Angular：获取json对象的最后3个元素答案

【问题标题】：Angular: Get last 3 elements of json objectAngular：获取json对象的最后3个元素
【发布时间】：2013-04-22 13:41:07
【问题描述】：

我有一个页面列出了一个项目并让用户向其中添加 cmets。

在该页面上，我想显示最后添加的 3 个 cmets。有关如何从 JSON 对象中获取最后 3 个 cmets 的任何提示？
另外，在添加新评论时，如何增加评论编号（目前为硬编码）？

查看我的代码：http://plnkr.co/edit/iOBXuQVY40LD8d8QV5ss?p=preview

谢谢

【问题讨论】：

我的答案显示最后三个 cmets，更新评论计数（包括每个添加的评论描述）。这就是您想要实现的目标吗？
@lucuma 你有机会看看我的编辑吗？
我将它分叉并进行了一些更改：plnkr.co/edit/6LKdy43jw6o4J507YfKc?p=preview 我认为您所拥有的可以简化。看看吧。
不要问更多问题，而是将答案授予以下帖子之一。我相信他们都回答了你原来的问题
您已经给出了一个答案，所以您大概是在问一个新问题，所以您可以将您的编辑作为一个新的特定问题发布。

标签： arrays json angularjs angularjs-ng-repeat

【解决方案1】：

扩展其他答案：您应该考虑为每条评论添加 ID 或日期。对于我的示例解决方案，我使用了“ID”。

在我的 fork plunk 中，我添加了一个总计和一个“显示更多”按钮，用于扩展评论列表。大小由变量“limit”控制。

此外，$scope.addMessage() 中的变量“itemID”正在将ID 添加到每个评论中。这将解决您问题的第 2 部分。

Plunker：http://plnkr.co/edit/bAtXmCls2gk8p5WAHsrM?p=preview

$scope.addMessage（添加项目，描述具有您在输入框中输入的任何值并将限制重置回最新的3）

  $scope.addMessage = function(mess) {
    var itemID = $scope.items[0].comments.length + 1;
    $scope.items[0].comments.push(
          {
            "id": itemID,
            "name":"user" + itemID,
            "description": mess
          }
      );
    $scope.totalItems = itemID;
    $scope.limit = 3;
  }

$scope.showMore（将限制增加 3）

  $scope.showMore = function() {
    $scope.limit += 3;
  }

JSON：我做了一点改动。 'cmets' 现在是一个数组，并添加了一个 'id'

    "comments":
    [
      {
        "id": 1,
        "name":"user1",
        "description": "This is comment 1"
      },
      {
        "id": 2,
        "name":"Jane D.",
        "description": "This is comment 2"
      },
      ...
    ]

【讨论】：

谢谢你们的回复！注释“id”应该已添加到我的原始代码中……我的错。 @rudeovski-ze-bear 你的版本似乎接近我想要的。我会对其进行测试并尽快回复您。再次感谢。
@Patrice 没问题。请记住，如果这确实解决了您的问题，请将其标记为已回答。
还有几个问题可以吗？请参阅我的 EDIT 和 plunker plnkr.co/edit/w4Tpz0Tp53fXRZj7Jbbe?p=preview 在代码中添加了一些 cmets。

【解决方案2】：

有几点需要注意：

我将 cmets 更改为 json 中的数组。出于某种原因，您将它作为一个对象。

您可以使用limitTo 过滤器来限制最后三个。 <li ng-repeat="message in item.comments | limitTo:-3"></li>

我的回答包括总的和有效的添加评论。

控制器代码：

myApp.controller('ItemController', function($scope, $route, $location, $http, Items){

  Items.get(function(response){
    $scope.items = response; 

  })

  $scope.$watch('items', function() {
     $scope.total = $scope.items[0].comments.length;
  });

  $scope.addMessage = function(mess) {
    $scope.items[0].comments.push(
      {
        "name":"user1",
        "description": "This is comment " + ($scope.total + 1) 
      }
    );
  }

})

更新的 Plunkr：http://plnkr.co/edit/2oWLRU06Kdp0yKqjodmv?p=preview

【讨论】：

关于同一主题的另外 2 个问题可以吗？请参阅我的编辑。从你的 plunker 扩展：plnkr.co/edit/W5FibkcRzjKeM5iO2gtn?p=preview

【解决方案3】：

查看limitTo Filter。您可以使用否定从列表末尾指定。

你可以这样做

message in item.comments|limitTo:-3

对于您的 cmets，您不应该将它们作为对象字典，而应该像这样使用数组：

"comments":
        [
          {
            "id": "comment1",
            "name":"user1",
            "description": "This is comment 1"
          },
          {
            "id": "comment2",
            "name":"Jane D.",
            "description": "This is comment 2"
          },
          {
            "id": "comment3",
            "name":"Jone D.",
            "description": "This is comment 3"
          },
          {
            "id": "comment4",
            "name":"Test",
            "description": "This is comment 4"
          },
          {
            "id": "comment5",
            "name":"user",
            "description": "This is comment 5"
          }
        ]

如果它们尚未按顺序排列，您可能需要添加一个排序日期字段，并在拉入它们后对其进行排序。

这是一个update plunker 来帮助你。请注意，您的 ng-repeat 也在错误的位置

【讨论】：