angularjs ng repeat - Angular嵌套注释-提交表单时未定义的值

Question

我试图得到一个动态脚本嵌套的评论工作。

我的第一个问题是我不知道如何无休止地嵌套。现在我计划做3层，因为我不知道如何使它动态地工作。

第二个问题是，当我提交表单时，模型的值没有提交给js脚本。这些值是未定义的。

我想我的方法是错误的- ng-model元素不绑定在ng-repeat内部，也所有形式的值将被绑定到相同的元素…也许有人有什么建议。如果它很重要，我的后端运行Laravel 4。这是我的代码

var commentsApp = angular.module('commentsApp', []);
function CommentsCtrl($scope, $http, $compile) {
    var url_segments = window.location.host.split('.');
    var section = url_segments[0];
    $http.get('/api/' + section + window.location.pathname + '/comments').success(function (comments) {
        $scope.comments = comments;
    });
    $scope.toggleForm = function (id) {
        var container = document.getElementById(id);
        var html = '<br/><input name="category" type="text" ng-model="person.category" placeholder="Category" required/><span class="alert alert-error ng-show="add-bro.input.$error.required">Required</span>';
        var elem = $compile(html)($scope);
        angular.element(container).append(elem);
    }
    $scope.addComment = function () {
        var comment = {
            body: $scope.body,
            commentable_id: $scope.commentable_id,
            commentable_type: $scope.commentable_type
        };
        $scope.comments.push(comment);
    };
}
commentsApp.controller('CommentsCtrl', CommentsCtrl);

 <div class="content-row basic" ng-controller="CommentsCtrl" class="comments">
                    <form ng-submit="addComment()">
                        <input type="text" placeholder="Add Comment" ng-model="body">
                        <input type="hidden" value="@{{c.id}}" ng-model="commentable_id">
                        <input type="hidden" value="Player" ng-model="commentable_type">
                        <button type="submit">Add Comment</button>
                    </form>
                    <div ng-repeat="c in comments" class="comment">
                        <span>@{{c.author.username}}</span>
                        <p>@{{c.body}}</p>
                        <a href class="reply-link" ng-click="showForm = !showForm">Answer</a>
                        <div class="reply-container" ng-show="showForm">
                            <form ng-submit="addComment()">
                                <input type="text" placeholder="Add Comment" ng-model="body">
                                <input type="hidden" value="@{{c.id}}" ng-model="commentable_id">
                                <input type="hidden" value="Comment" ng-model="commentable_type">
                                <button type="submit">Add Comment</button>
                            </form>
                        </div>
                        <div ng-repeat="cc in c.comments" class="s-comment">
                            <span>@{{cc.author.username}}</span>
                            <p>@{{cc.body}}</p>
                            <a href class="reply-link" ng-click="showForm = !showForm">Answer</a>
                            <div class="reply-container" ng-show="showForm">
                                <form ng-submit="addComment()">
                                    <input type="text" placeholder="Add Comment" ng-model="body">
                                    <input type="hidden" value="@{{c.id}}" ng-model="commentable_id">
                                    <input type="hidden" value="Comment" ng-model="commentable_type">
                                    <button type="submit">Add Comment</button>
                                </form>
                            </div>
                            
                            <div ng-repeat="ccc in cc.comments" class="ss-comment">
                                <span>@{{ccc.author.username}}</span>
                                <p>@{{ccc.body}}</p>
                                <a href class="reply-link" ng-click="showForm = !showForm">Answer</a>
                                <div class="reply-container" ng-show="showForm">
                                    <form ng-submit="addComment()">
                                        <input type="text" placeholder="Add Comment" ng-model="body">
                                        <input type="hidden" value="@{{c.id}}" ng-model="commentable_id">
                                        <input type="hidden" value="Comment" ng-model="commentable_type">
                                        <button type="submit">Add Comment</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Answer 1

  var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            //Comments object having reply oject
            $scope.comments = [{ comment: 'hi', reply: [{ comment: 'hi inside commnet' }, { comment: 'hi inside commnet' }] }];
            //push reply
            $scope.insertReply = function (index, reply) {
                $scope.comments[index].reply.push({ comment: reply });
            }
            //push commnet
            $scope.newComment = function (comment) {
                $scope.comments.push({ comment:comment, reply: [] });
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
        <!--Comment section-->
        <ul ng-repeat="comment in comments track by $index" style="background: skyblue; padding: 10px;">
            <li>
                <b>Comment {{$index}} : </b>
                <br>
                {{comment.comment}}
                <!--Reply section-->
                    <ul ng-repeat="reply in comment.reply track by $index">
                        <li><i>Reply {{$index}} :</i><br>
                            {{reply.comment}}</li>
                    </ul>
                <!--End reply section-->
                <input type="text" ng-model="reply" placeholder=" Write your reply." /><a href="" ng-click="insertReply($index,reply)">Reply</a>
            </li>
        </ul>
        <!--End comment section -->
            
        <!--Post your comment-->
        <b>New comment</b>
        <input type="text" placeholder="Your comment" ng-model="comment" />
        <a href="" ng-click="newComment(comment)">Post </a>
    </div>