如何使用延迟加载在 ng-repeat 中将项目添加到数组

Question

我有很多评论。对于每条评论，我都有一个隐藏的表格，您可以在其中回复。数组的每个对象中的该项称为：comment.showSubCommentForm。当我单击 Reply 时，我希望能够回复评论和调用的函数：commentOnSubPost.

我通过使用无限滚动距离 Angular 模块以 10 块（延迟加载）的形式加载我的数据。每次我到达页面末尾时，我都会得到接下来的 10 个项目并将它们添加到 $scope.comments 数组中，你可以在下面看到我是运行我的 ng-repeat on .

问题是，虽然 commentOnSubPost 工作得很好，因为它添加了对评论的回复，但我已经重新加载数据，所以我可以获得更新的 $scope.comments 和新的回复。但是 - 因为我已经实现了延迟加载，如果说我在第 20 页，我该怎么做？

我看了一些类似的 post，但他们的方法与我的非常不同，所以我很迷茫。

我的HTML:

<div infinite-scroll='loadMore()' infinite-scroll-distance='1'>
<div class="row">
<div ng-repeat="comment in comments track by $index">
 <ul class="comments">
  <li class="clearfix">
   <a ng-href="#">SomeLink</a>
   <div>
    <p >{{ comment.date }} <a ng-href="/wall#/profile/main/{{ comment.userID }}">{{ comment.fullname }}</a> says <i class="commentReply"><a href ng-click="comment.showSubCommentForm = !comment.showSubCommentForm"><small>Reply</small></a></i></p>
    <p class="mainComment">
     {{ comment.comment }}
     <p class="meta"><i class="showReply"><a href ng-click="comment.showReplies = !comment.showReplies"><small>Show Replies</small></a></i></p>
    </p>
   </div>
   <div ng-show="comment.showSubCommentForm">
    <form ng-submit="commentOnSubPost( post._id, comment._id, subComment)">
     <div class="form-group">
      <div class="form-group">
       <textarea ng-model="subComment" class="form-control" placeholder="Reply to the above comment"></textarea>
      </div>
      <input type="submit" value="Reply">
     </div>
    </form>
   <div ng-show="comment.showReplies" ng-repeat="subComment in comment.subComments track by $index">
    <ul class="comments">
     <li class="clearfix">
      <a ng-href="/wall#/profile/main/{{ comment.userID }}"><img ng-src="{{ subComment.profilePic }}" class="avatar" style="border-radius: 50%"></a>
      <div class="post-subComments">
       <p class="meta">{{ subComment.date }}<a ng-href="SomeLink"> {{ subComment.fullname }}</a></p>
       <p>
        {{ subComment.comment }}
       </p>
      </div>
     </li>
    </ul>
   </div>
  </li>
 </ul>
 </div>
</div>

我不会在这里添加太多信息，因为我不想让这个内容过载 post，但是如果您需要任何特定信息，请告诉我。我只需要知道如何重新加载数据（如果有其他方法，则不重新加载）以便我可以获得最新数据。

我希望这是有道理的。

提前致谢！

Answer 1

就像你有 $scope.comments = [];然后在每次调用时，您只需将即将到来的数据附加到该数组。比如 $scope.comments = $scope.comments.concat(response.data); 这样懒加载就可以了。

Answer 2

我通过创建一个 Node 路由修复了这个问题，它返回了我刚刚添加的确切评论。然后，我在我的 $scope.comments 中找到了那个 commentID，并将其作为我在本地的那个的 subCommenemts。

它完成了工作并且数据是真实的。一个缺点是，如果那时有另一条评论，它会在页面刷新后才会显示，但我对此并不太在意。

如何使用延迟加载在 ng-repeat 中将项目添加到数组

How to add item to array in ng-repeat with lazy loading

lazy-loading

angularjs

angularjs-ng-repeat