javascript - 使用 Angular JS HTML 在 DIV 中重复数据

Question

我正在尝试创建 Facebook Post 显示的方式。这里的对话消息包含帖子列表，并且单击帖子获取评论将被调用，这将获取所有评论以及与该评论相对应的回复。

<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>

获取Post方法将填充coverationMessageList(数组)

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

获取评论将填充commentList、replyCount和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) {                     
              });
          }

问题是当我点击特定 div 时，评论和回复会反射(reflect)到所有其他 div

Answer 1

将commentList移至coversationMessage ... 尝试下面的代码:

<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>

服务:

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