在角度如何将嵌套对象添加到ng-repeat

时间:2016-09-06 21:22:02

标签: javascript angularjs angular-module

我是一个完整的角落菜,所以请原谅这个基本问题。

我的模型的帖子/评论结构如下所示:

[
    {
        "title": "awesome post",
        "desc": "asdf",
        "comment_set": [
            {
                "id": 2,
                "desc": "another awesome comment",
            }
        ]
     }
]

我的角度模板如下所示:

<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>

我的角度组件如下所示:

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;

        });
      }
    ]
  });

我错过了哪些内容会为评论ng-repeat添加评论?

1 个答案:

答案 0 :(得分:1)

您的addComment功能不正确。

你应该:

ng-submit="addComment(post.comment_set)"

和:

ng-model="$ctrl.desc"

然后,addComment()应该是:

self.addComment(comment_set){
    comment_set.push({desc: self.desc, id: <ID_HERE>});
    self.desc = null;
}

这样,您可以重置desc变量,以便添加新注释