[英]Data Getting Repeated In DIV using Angular JS HTML
我正在嘗試創建Facebook Post顯示方式。 此處的對話消息包含發布的列表,並且單擊發布后的單擊,get-comments被調用,它將獲取所有評論以及與該評論對應的回復。
<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>
獲取帖子方法將填充coverageationMessageList(數組)
$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) { }); }
將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) {
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.