Data Getting Repeated In DIV using Angular JS HTML

Question

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) {                     
              });
          }

The Problem is when i click on a Particular div the Comments and the reply is getting reflected to all the other div

Can you please make a working Demo, and reproduce the error?! — cнŝdk
– cнŝdk, Commented Nov 28, 2017 at 10:10
Running out of time, otherwise could have done a small demo,I have attached the Screen Shot...You can clearly see that Comment is getting Duplicated for the other div. — Pawan Kumar
– Pawan Kumar, Commented Nov 28, 2017 at 10:19
@I can see it in the screenshot, but your complete code will be more helpful. — cнŝdk
– cнŝdk, Commented Nov 28, 2017 at 10:20

Danish · Accepted Answer · 2017-11-28 10:26:29Z

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) {
    });
}

Thanks buddy...let me check, i think Move the commentList into coversationMessage will help
Great !! Please try this out and let me know. Will reply asap :)

Collectives™ on Stack Overflow

Data Getting Repeated In DIV using Angular JS HTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related