I am trying to create Just the way Facebook Post gets display. Here Conversation Message Contains the list of Post and on-click of the Post get-comments is getting Called which will fetch all the Comments as well as Reply corresponding to that Comment.
<div ng-repeat="coversationMessage in coversationMessageList"> <div ng-click="getComments(coversationMessage.channel_message_ID)"> <div>{{coversationMessage.date_time}}</div> <div>{{coversationMessage.channel_message}}</div> <div ng-if='commentList.length!=0'> <div ng-repeat="comment in commentList"> <div>{{comment.date_time}}</div> <div><b>{{comment.channel_message}}</b></div> <div ng-if="commentMsg.replyCount> 0"> <div><a ng-click="showhideReply($index+1);$event.stopPropagation()">{{commentMsg.replyCount}}Replies</a></div> <div class="mailText" ng-repeat="replyMessage in commentMsg.replyList"> <div>{{replyMessage.date_time |formatDateTime}}</div> <div>{{replyMessage.channel_message}}</div> </div> </div> </div> </div> </div>
Get Post Method will Populate the coversationMessageList (Array)
$scope.getPost = function(channel_thread_id) { var promise = dashboardServices.getConversation(channel_thread_id); promise.then(function(data) { $scope.coversationMessageList = data.data; }).catch(function(error) { console.log("Error in fetching Conversation " + error); }); }
Get Comments Will Populate commentList, replyCount and replyList
$scope.getComments = function(channel_thread_id) { var promise = dashboardServices.getConversation(channel_thread_id); promise.then(function(data) { $scope.commentList = data.data; console.log(JSON.stringify(data.data)); // This foreach method is to show comment reply for facebook angular.forEach($scope.commentList, function(comment) { if (comment.channel_message_ID) { var channel_thread_id = comment.channel_message_ID; var promise = dashboardServices.countReplyOnComment(channel_thread_id); promise.then(function(data) { $scope.commentMsg = {}; $scope.commentMsg = comment; $scope.commentMsg.replyCount = {}; $scope.commentMsg.replyList = {}; $scope.countReply = data.data.length; $scope.commentMsg.replyCount = $scope.countReply; $scope.commentMsg.replyList = data.data; comment = $scope.commentMsg; console.log(comment); }).catch(function(error) { }); } }); }).catch(function(error) { }); }
Move the commentList into coversationMessage
... Try the below code :
<div ng-repeat="coversationMessage in coversationMessageList">
<div ng-click="getComments(coversationMessage)">
<div>{{coversationMessage.date_time}}</div>
<div>{{coversationMessage.channel_message}}</div>
<div ng-if='coversationMessage.commentList && coversationMessage.commentList.length!=0'>
<div ng-repeat="comment in coversationMessage.commentList">
<div>{{comment.date_time}}</div>
<div><b>{{comment.channel_message}}</b></div>
<div ng-if="commentMsg.replyCount> 0">
<div><a ng-click="showhideReply($index+1);$event.stopPropagation()">{{commentMsg.replyCount}}Replies</a></div>
<div class="mailText" ng-repeat="replyMessage in commentMsg.replyList">
<div>{{replyMessage.date_time |formatDateTime}}</div>
<div>{{replyMessage.channel_message}}</div>
</div>
</div>
</div>
</div>
</div>
The service :
$scope.getComments = function (coversationMessage) {
var channel_thread_id = coversationMessage.channel_message_ID;
var promise = dashboardServices.getConversation(channel_thread_id);
promise.then(function (data) {
coversationMessage.commentList = data.data;
console.log(JSON.stringify(data.data));
// This foreach method is to show comment reply for facebook
angular.forEach(coversationMessage.commentList, function (comment) {
if (comment.channel_message_ID) {
var channel_thread_id = comment.channel_message_ID;
var promise = dashboardServices.countReplyOnComment(channel_thread_id);
promise.then(function (data) {
$scope.commentMsg = {};
$scope.commentMsg = comment;
$scope.commentMsg.replyCount = {};
$scope.commentMsg.replyList = {};
$scope.countReply = data.data.length;
$scope.commentMsg.replyCount = $scope.countReply;
$scope.commentMsg.replyList = data.data;
comment = $scope.commentMsg;
console.log(comment);
}).catch(function (error) {
});
}
});
}).catch(function (error) {
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.