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.
我新AngularJS。我研究过ng-repeat背后的理论,但是我找不到任何关于双向数据绑定或为嵌套ng-repeat创建对象的好例子。我理解在最近的版本中语法发生了变化。我用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.
我发布了具有嵌套注释对象数组的对象。我希望能够向post中的注释数组添加新的注释对象。我试过很多不同的版本。
This is my HTML:
这是我的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 -
感谢Chandermani解决这个问题的答案。我稍微修改了控制器,因为我希望在数据存储中使用一个名为body的键
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});
}
}
]);
]);
1 个解决方案
#1
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.
addComment方法的问题是,它不知道需要向哪个post添加注释。另外,作为注释ng-repeat的一部分的注释输入可以有一个独立的模型,可以传递给controller方法。
You need to make the following changes. In html
您需要做以下更改。在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);
}
#1
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.
addComment方法的问题是,它不知道需要向哪个post添加注释。另外,作为注释ng-repeat的一部分的注释输入可以有一个独立的模型,可以传递给controller方法。
You need to make the following changes. In html
您需要做以下更改。在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);
}