2

我有一个页面列出了一个项目并让用户向它添加评论。

  1. 在该页面上，我想显示添加的最后 3 条评论。关于如何从 JSON 对象获取最后 3 条评论的任何提示？
  2. 另外，在添加新评论时，我如何增加评论编号（现在是硬编码）？

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

谢谢

4

3 回答 3

3

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

你可以做

message in item.comments|limitTo:-3

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

"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"
          }
        ]

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

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

于 2013-04-29T00:40:39.193 回答
1

有几点需要注意：

我将注释更改为 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

于 2013-04-29T00:55:12.630 回答
1

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

在我的分叉 plunk 中，我添加了一个总数，以及一个用于可扩展评论列表的“显示更多”按钮。大小由变量 ' limit' 控制。

此外，里面的变量 ' itemID'$scope.addMessage()将添加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：我稍微改了一下。'comments' 现在是一个数组，并添加了一个 'id'

    "comments":
    [
      {
        "id": 1,
        "name":"user1",
        "description": "This is comment 1"
      },
      {
        "id": 2,
        "name":"Jane D.",
        "description": "This is comment 2"
      },
      ...
    ]
于 2013-04-29T01:48:12.243 回答