Is it possible to retrieve the 'id' of the comment I'm replying to and save it for an Ajax call? I can easily access other data with ng-model, but using value="{{this.id}}" in a hidden input doesn't seem to work like in JQuery.
<script type="text/ng-template" id="comments-temp">
<div>
<ul class="comments" ng-repeat="comment in ctrl.comments">
<li>
<div class="comment" id="{{comment.id}}">
<div class="comment-author">
<a href="#" style="background-image: url('assets/img/tmp/agent-1.jpg');"></a>
</div><!-- /.comment-author -->
<div class="comment-content">
<div class="comment-meta">
<div class="comment-meta-author">
Posted by <a href="#">admin</a>
</div><!-- /.comment-meta-author -->
<div class="comment-meta-reply">
<a href="#" ng-click="showPanel = true">Reply</a>
</div>
<div class="comment-meta-date">
<i class="fa fa-calendar"></i><span>{{comment.dateAdded | date: 'medium'}}</span>
</div>
</div><!-- /.comment -->
<div class="comment-body">
<div class="comment-item" id="commentTitle">
<h6>{{comment.title}}</h6>
</div>
{{comment.body}}
</div><!-- /.comment-body -->
</div><!-- /.comment-content -->
</div><!-- /.comment -->
<panel ng-show="showPanel">
<div class="comment-create" ng-model="ctrl.reply">
<form method="post" action="?">
<div class="row">
<div class="col-sm-4">
<div class="form-group ">
<label>Title</label>
<input type="text" class="form-control" ng-model="ctrl.reply.title">
</div><!-- /.form-group -->
</div><!-- /.col-* -->
<div class="col-sm-4">
<div class="form-group hidden">
<label>Title</label>
<input type="text" class="form-control" ng-model="ctrl.reply.name">
</div><!-- /.form-group -->
</div><!-- /.col-* -->
<div class="col-sm-4">
<div class="form-group hidden">
<label>ParentId</label>
<input type="text" class="form-control" value="{{comment.id}}" ng-model="ctrl.reply.parentId">
</div><!-- /.form-group -->
</div><!-- /.col-* -->
</div><!-- /.row -->
<div class="form-group">
<label>Message</label>
<textarea class="form-control" rows="5" ng-model="ctrl.reply.body"></textarea>
</div><!-- /.form-group -->
<div class="form-group-btn">
<button type="button" ng-click="ctrl.replyComment(ctrl.reply); showPanel = false;" class="btn btn-primary pull-right">Post Reply</button>
</div><!-- /.form-group-btn -->
</form>
</div>
</panel>
<div style="height:35px"></div>
</li>
</ul>
</div> <!--comment temp end-->
I hope this explanation makes sense. What I am trying to achieve is:
<script>
function _replyComment(data){
vm.commentData = data;
vm.commentData.blogId = vm.blogId;
vm.commentData.userId = page.currentUserId;
vm.commentData.typeId = 1;
vm.commentData.parentID = //??????? where I want the value the id of the comment I'm replying too
console.log(vm.commentData);
comments.services.insert(data, _onSuccessComment, _onError);// my ajax is in a separate .js file. it's not important for this demo
}
</script>
After this step, the challenge is nesting the replies in the DOM correctly. But that is a question for another day. This is where Jquery proves to be more convenient than angular.
Thank you!