使用Angular JS HTML在DIV中重复获取数据

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

Answer 1

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