AngularJS1 + Django REST Frameworkに再挑戦 その11 Reply to Comments

概要

AngularJS1 + Django REST Frameworkに再挑戦 その11 Reply to Comments

参考動画

Django + AngularJS | Coding For Entrepreneurs

Reply to Comments

• コメントのreplyとかを表示したい。まずはcommentのcontextの内容を確認する。

<ul ng-show='comments.length > 0'>
    <li ng-repeat='comment in comments | filter: query'>
            {{ comment.content }} | Replies: {{ comment.reply_count }} | <a href='#' class='btn btn-sm btn-default' confirm-click='Do you want to delete this?' confirmed-click='deleteComment(comment)'>X</a>
    </li>
</ul>

• さらにcommentの送信ボックスなどを作る。

<ul ng-show='comments.length > 0'>
    <li ng-repeat='comment in comments | filter: query'>
            {{ comment.content }}<br/>| <small>Replies: {{ comment.reply_count }} |<a href='#' class='' confirm-click='Do you want to delete this?' confirmed-click='deleteComment(comment)'>Remove</a></small>
            <br/>
            <div class='row'>
                <div class='col-sm-6'>
                    <p style='color:red;' ng-if='reply.content'>Preview: {{ reply.content }}</p>
                    <form ng-submit='addReply()'>
                        <textarea class='form-control'  ng-model='reply.content'></textarea>
                        <input class='btn btn-default btn-sm' type='submit' value='Reply'/>
                    </form>
                </div>
            </div>
        <div class='clearfix'></div>
        <br/>
        <br/>
    </li>
</ul>

• commentのreplyのformに、parent_idが自動で入力されるようにする。

<form ng-submit='addReply()'>
    <input type='hidden' ng-model='reply.parent_id' value='{{ comment.id }}'>
    <textarea class='form-control'  ng-model='reply.content'></textarea>
    <input class='btn btn-default btn-sm' type='submit' value='Reply'/>
</form>

• blog-detail.component.jsのaddReplyに追記してみる。

$scope.addReply = function() {
          console.log($scope.reply)

• このままではうまく行かないので、addCommentReplyというfunctionをblog-detail.component.jsに追記する。

$scope.addCommentReply = function(reply, parentComment){
          console.log(reply)
          console.log(parentComment.id)
      }
      //これはとりあえず、replyの内容と、parentComment.idの内容をconsolelogに表示するだけ。

• blog-detail.htmlに追記する。addCom

<form ng-submit='addCommentReply(reply, comment)'>
    <textarea class='form-control'  ng-model='reply.content'></textarea>
    <input class='btn btn-default btn-sm' type='submit' value='Reply'/>
</form>

• blog-detail.htmlに追記する。addNewCommentというfunctionに変更する。

<div class='row'>
        <div class='col-sm-6'>
            <p style='color:red;' ng-if='newComment.content'>Preview: {{ newComment.content }}</p>
            <form ng-submit='addNewComment()'>
                <textarea class='form-control'  ng-model='newComment.content'></textarea>
                <input class='btn btn-default' type='submit'/>
            </form>
        </div>
    </div>

• blog-detail.component.jsにaddNewCommentを作成する。

$scope.addNewComment = function() {
          // console.log($scope.reply)
          Comment.create({
              content: $scope.newComment.content,
              slug: slug,
              type: "post"
              },
              function(data){
                  //console.log(data)
                  $scope.comments.push(data)
                  resetReply()
              }, function(e_data){
                  // error
                  console.log(e_data)
              })
      }