How do I add an object to a nested array in AngularJS?

Question

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

}

]);

Chandermani · Accepted Answer · 2013-08-18 10:28:46Z

3

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

answered Aug 18, 2013 at 10:28

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wisemanIV Over a year ago

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.

Collectives™ on Stack Overflow

How do I add an object to a nested array in AngularJS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related