StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow do I add an object to a nested array in AngularJS?
primarykey
Id
18297673
data
AcceptedAnswerId
0
AnswerCount
1
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-08-18T09:29:31.340
FavoriteCount
1
LastActivityDate
2013-08-18T11:15:23.520
LastEditDate
2013-08-18T11:15:23.520
LastEditorUserId
2291789
OwnerUserId
2291789
ParentId
0
PostTypeId
1
Score
2
ViewCount
13435
LastEditorDisplayName
text
Body
<p>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. </p> <p>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. </p> <p>This is my HTML:</p> <pre><code><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> </code></pre> <p>This is the controller:</p> <pre><code>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); } } ]); </code></pre> <hr> <p>SOLUTION:</p> <p>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 -</p> <pre><code>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}); } } </code></pre> <p>]);</p>
Tags
<angularjs><angularjs-scope><angularjs-ng-repeat><angularfire>
Title
How do I add an object to a nested array in AngularJS?
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USwisemanIV
UserOwnerUserId
1. USwisemanIV
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.