Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I'm new to AngularJS. I've researched the theory behind ng-repeats but I cannot find any good examples of 2-way data binding or object creation for nested ng-repeats. I understand that the syntax has changed in recent versions. I'm using 1.1.5.

I have post objects that have a nested array of comment objects. I want to be able to add new comment objects to the array of comments in the post. I've tried lots of different versions.

This is my HTML:

<div id='posts' ng-controller="PostsCtrl">

      <ul>
          <div id='post' ng-repeat="post in posts track by post.id">
              <div id='postMedia'>
              <img ng-click="" ng-src={{post.attachment}} />
              </div>
              <div ng-click="">
                  <div ng-click="">{{post.message}}</div>
                  <div ng-click="">{{post.created_at}}</div>
              </div>
          <h1>Comments</h1>
          <div id='comment' ng-repeat="comment in post.comments track by post.comment.id">
              <div ng-click="">{{comment.body}}</div>
          </div>
          <form ng-submit="addComment()">
            <input id="body" type="text" placeholder="Reply…" ng-model="post.comment.body">
            <input type="submit" value="Add">
          </form>
          </div>
      </ul>
    </div>

This is the controller:

myApp.controller('PostsCtrl', ['$scope', 'angularFire',
function MyCtrl($scope, angularFire) {
var url = 'https://inviter-dev.firebaseio.com/posts';
$scope.items = angularFire(url, $scope, 'posts',  {});
$scope.commentProp = 'comments';

$scope.addComment = function() {
    $scope.comments.push($scope.newcomment);
}

  }
]);

SOLUTION:

Thanks to Chandermani answer for solving this. I modified the controller slightly because I wanted the to use a key called body in the data store -

myApp.controller('PostsCtrl', ['$scope', 'angularFire',
function MyCtrl($scope, angularFire) {
var url = 'https://inviter-dev.firebaseio.com/posts';
$scope.items = angularFire(url, $scope, 'posts',  [] );

$scope.addComment = function(post,comment) {
    post.comments.push({body:comment});
}

}

]);

share|improve this question
add comment

1 Answer

The problem with you addComment method is that it does not know which post it needs to add comment to. Also the comment input that is part of you ng-repeat for comments can have a independent model which can be passed to the controller method.

You need to make the following changes. In html

<form ng-submit="addComment(post,commentData)">
   <input id="body" type="text" placeholder="Reply…" ng-model="commentData">
   <input type="submit" value="Add">
</form>

In your controller

$scope.addComment = function(post,comment) {
    post.comments.push(comment);
}
share|improve this answer
 
This is nearly there. I'm pushing data to Firebase but the comment does not have the body key. I'm now using an array datatype to hold the posts and comments. Where before I was using a dictionary. –  wisemanIV Aug 18 '13 at 11:08
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.