2017-08-10 12 views
0

私はコメントの配列を持っています。コメントごとに、返信できる隠しフォームがあります。配列の各オブジェクトのその項目は、comment.showSubCommentFormと呼ばれます。 返信をクリックすると、私はコメントと返信することができるようにしたい:commentOnSubPost遅延ロードでng-repeatの配列に項目を追加するには

私は、無限スクロール距離の角度モジュールを使用して、私が行っている10のチャンク(レイジーローディング)でデータを読み込みます。私がページの終わりに達するたびに、次の10個の項目を取得し、$ scope.comments配列に追加します。これは、でng-repeatを実行していることを示しています。

問題は、それがコメントへの返信を追加しますcommentOnSubPost作品が本当によくように、私は新しい返信で更新の$ scope.commentsを得ることができるので、データをリロード持っている、ということです。しかし、私が遅延ロードを実装したように、私が20ページ目にいるとすれば、どうすればいいですか?

私はいくつかの同様の投稿を見ましたが、私のアプローチは非常に異なっていたので、非常に紛失しています。

マイ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> 

私はこの記事をオーバーロードしたくないとして、ここであまりにも多くの情報を追加しませんが、あなたは、特定の情報が必要な場合、私に知らせてください。私はちょうど私が最新のデータを得ることができるように、データをリロードする方法(または別の方法がない場合)を知る必要があります。

これは意味があると思います。

ありがとうございます!

答えて

0

ノードルートを作成することでこれを修正しました。このノードルートは、私が今追加した正確なコメントを返します。次に、私は$ comment.commentsのcommentIDを見つけて、私がローカルに持っているものにサブコムメントを付けました。

これは仕事をしており、データは実際のものです。 1つの欠点は、その時に別のコメントがある場合、ページがリフレッシュされるまで表示されないことですが、それについてもあまり心配していません。

0

あなたには$ scope.comments = [];があります。各呼び出しで次回のデータをこの配列に追加するだけです。 $ scope.comments = $ scope.comments.concat(response.data)と似ています。 このようにして、遅延読み込みが機能します。

+0

私はあなたが私の質問を誤解しているかもしれないと思います。私の怠惰な読み込みはここでは問題ではないので、もう一度読み直してください。 –

関連する問題