Issue
I am building a Reddit clone. So far you are able to add links, upvote/down vote, and comment/remove comments on the links posted. You must be logged in via Twitter to add comments or posts.
The big issue I am facing is whenever a post has comments, they do not show up if you reload the website. You must add a new comment to see comments which are already present. The next big issue is if you add a new post it will automatically inherit the comments from the previously commented on post even though these comments are not in the posts data on the Firebase Server.
If you comment on the new post it causes all the other post's comments to inherit the new comment on the new post.
Here is the source code.
<div>
<span>Currently Logged in as: {{authData.twitter.username}}</span>
<form>
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label class="control-label" for="focusedInput">Post Name</label>
<input type="text" ng-model="post.name" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label class="control-label" for="focusedInput">Description</label>
<input type="text" ng-model="post.description" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label class="control-label" for="focusedInput">URL</label>
<input type="text" ng-model="post.url" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-3">
<button ng-click="savePost(post)" class="form-control" style="margin-top: 25px">Submit</button>
</div>
</div>
</div>
</form>
</div>
<div ng-repeat="post in posts">
<h2><a ng-href="{{post.url}}">{{post.name}}</a></h2>
<p>{{post.description}}</p>
<button ng-click="deletePost(post)" class="btn btn-danger">Delete Post</button>
<span>{{post.votes}}</span>
<button ng-click="addVote(post)" class="btn btn-primary">Up Vote</button>
<button ng-click="removeVote(post)" class="btn btn-primary">Down Vote</button>
<br>
<br>
<div class="panel panel-default" ng-repeat="comment in comments">
<div class="panel-body">
<a ng-href="https://twitter.com/{{comment.user}}">{{comment.user}}</a>
</div>
<div class="panel-footer">
{{comment.text}}
<br>
<button class="btn btn-danger" ng-click="removeComment(post, comment)">Remove Comment</button>
</div>
</div>
<form>
<div class="input-group">
<input ng-model="comment.text" class="form-control">
<div class="input-group-btn"><button ng-click="addComment(post, comment)" class="btn btn-success">Add Comment!</button></div>
</div>
</form>
</div>
<br>
<button class="btn btn-primary" ng-click="login()">Log in with Twitter</button>
<!--Starter Project for the Reddit Clone-->
<!doctype html>
<html ng-app="reddit-clone">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.min.js">
</script>
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
<link rel="stylesheet" href="bootstrap.css">
<script src="app.js"></script>
<title>Reddit Clone</title>
</head>
<body style="width: 80%; margin: 0 auto">
<h1 class="text-center">Reddit Clone</h1>
<div ng-view></div>
</body>
</html>
Here is a picture of the database showing that the comment only exists for the first post.
Here is a picture showing how the comment is display on both posts even though it is only in one in the database.
Solution
You are storing only one comments array on your $scope.
Then in your template, you are looping over this one array for each post inside the ng-repeat on posts, hence it is the same for both posts. You need to loop over the comments that are specific to a post instead. Like so:
<div class="panel panel-default" ng-repeat="comment in post.comments">
Notice the post.comments.
Answered By - Michal
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.