I'm new to using Angular so please excuse my basic question.
Here is the structure of my model for posts and comments:
[
{
"title": "awesome post",
"desc": "asdf",
"comment_set": [
{
"id": 2,
"desc": "another awesome comment",
}
]
}
]
This is how my Angular template looks:
<li ng-repeat="post in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.created_at" class="media media-clearfix-xs">
<div>{{post.title}}</div>
<ul class="comments">
<li ng-repeat="comment in post.comment_set | orderBy:created_at" clas="media">
<div>{{comment.desc}}
</li>
<li class="comment-form">
<div class="input-group">
<form ng-submit="$ctrl.addComment()">
<input ng-model="post.comment_set.desc" type="text" class="form-control" />
</form>
<span class="input-group-btn">
<input type="submit" class="btn btn-default"><i class="fa fa-photo"></i></input>
</span>
</div>
</li>
</ul>
</li>
Below is my Angular component setup:
angular.
module('phoneList').
component('phoneList', {
templateUrl: '/static/common/angular/phone-list/phone-list.template.html',
controller: ['$http',
function PhoneListController($http) {
var self = this;
self.addComment = function() {
self.push({desc:post.comment_set.desc});
};
$http.get('api/posts/').then(function(response) {
self.phones = response.data;
});
}
]
});
I need help figuring out how to add comments to the existing list of comments. Can you point me in the right direction?