What is the best way to organize dynamic editing of comments?

Question

Angular

Hello everyone, I have a simple comment feed and I need to make it so that when you click on the edit button, a textarea appears behind the comment place in which you can edit the comment. Here's what I've come up with at the moment, but obviously it's a pretty shitty option.

<div class="comment-block col-md-12" ng-repeat="comment in comments">
      <div class="user-data col-md-3">
        <div class="user-name">{{ comment.user.name }}</div>
        <div class="date">{{ comment.published_at }}</div>
      </div>

      <div class="comment-body col-md-8" ng-hide="editMode">
        <div class="text">{{ comment.body }}</div>
      </div>

            <div class="col-md-8 ng-hide" ng-show="editMode" ng-if="comment.user.id === article.currentUser.id">
                <form method="POST"
                      accept-charset="UTF-8"
                      name="editCommentForm"
                      ng-controller="commentController"
                      novalidate="novalidate"
                      class="rg-form edit-comment-form"
                      ng-submit="editComment($event, article.currentUser.id, article.id)">

                    <div class="form-group">
                        <label for="editbody">Body:</label>
                    <textarea class="form-control"
                              ng-model="editComment.body"
                              required="required"
                              ng-maxlength="400"
                              ng-minlength="20"
                              name="body"
                              id="editbody">
                    </textarea>
                        <div class="validation-messages" ng-messages="editCommentForm.body.$error" role="alert">
                            <div ng-message="required">Required field</div>
                            <div ng-message="minlength">Must be at least 20 simbols long</div>
                            <div ng-message="maxlength">Can't be more than 400 simbols</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <input class="btn btn-primary form-control"
                               ng-disabled="editCommentForm.$invalid || disable"
                               type="submit"
                               value="Submit">
                    </div>

                </form>
            </div>

            <div class="col-md-1" ng-if="comment.user.id === article.currentUser.id">
                <div class="buttons-block comment-buttons">

          <div ng-click="editMode"
                         class="button edit-button rg-transition">
            <span class="glyphicon glyphicon-pencil"></span>
          </div>

          <div ng-click="deleteTheComment(comment.id, comment.user_id)"
                         class="button delete-button rg-transition">
                         <span class="glyphicon glyphicon-remove"></span>
                    </div>

                </div>
            </div>

    </div>

or maybe it's a fabulous idea in general and it's better to implement a modal window or jump to a separate form?

Answer 1

Try this