0

Just starting here with Firebase. I'm trying out a simple blog using the new SDK and angular. So far I can add an array of articles that contains the title, author, text, etc. But I'd Like to add an Array of Comments to each article. Not sure about the best way to accomplish this. My instinct wants to make the Comments nest under the unique ids of the articles. But the Docs are against all things unflat.

var postref = firebase.database().ref('articles');
var commentsref = firebase.database().ref('articles').child('comments')
$scope.articles = $firebaseArray(articlesref);
$scope.comments = $firebaseArray(commentsref);
   $scope.addarticles = function() {
     $scope.articles.$add({
        title: $scope.newTitle,
        author: $scope.newAuthor,
        text: $scope.newPost,
        date: firebase.database.ServerValue.TIMESTAMP,
      });
        $scope.newTitle = null;
        $scope.newAuthor = null;
        $scope.newPost = null;
        $scope.newDate = null;

};
    $scope.addComment = function() {

        text: $scope.newText, 
      });

        $scope.newText = null;


};

So now I'm trying to have the Comments bind to the appropriate article. Here's the markup

 <form ng-submit="addArticle()">
        <p class="entry">
            <input ng-model="newTitle" placeholder="Title" class="form-control">
        </p>
        <p class="entry">
            <input ng-model="newAuthor" placeholder="Author" class="form-control">
        </p>
        <p class="entry">
            <textarea ng-model="newText" cols="30" rows="6" placeholder="Text"></textarea>
        </p>


        <div>
            <button type="submit" class="button" ng-click="post=!post">Add post</button>
            <button ng-click="post=!post" class="button">Cancel</button>
        </div>
    </form>
                <h2>{{post.title}}</h2>
                <h4>{{post.author}}></h4>
                <h4>{{post.text}}</h4>

                <h6>{{post.date | date:'medium' | date:'HH:mm:ss'}</h6>

        <div>
  <form ng-submit="addComment()">

                    <h6>{{post.Comments}}</h6>

I'm sure the answer(s) is really obvious and I'll feel like a doofus. Thanks in advance.

Mehul Kabaria
  • 6,404
  • 4
  • 25
  • 50
  • See http://stackoverflow.com/questions/30299972/joining-data-between-paths-based-on-id-using-angularfire – Frank van Puffelen Mar 09 '17 at 14:42
  • Thank you Frank. Actually used a different technique to work it out though. Based on this article: [link](https://frontendcorner.wordpress.com/2015/01/24/nested-arrays-in-angularfire/). I just $add(ed) my comments with a subheading `postid: $scope.post.$id` and then filtered `ng-repeat="comment in comments | filter : { postid: post.$id }"` It works well . I think I may want to pre-filter in the future, but I'm not expecting millions of comments at this stage. Thanks again – Pete Gray Apr 09 '17 at 14:42

0 Answers0