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

Question

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

我的模型有一个如下所示的帖子/评论结构：

[
    {
        "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 添加评论？

Answer 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 变量，以便添加新评论