comments - Angular 嵌套注释 - 提交表单时值未定义

Question

我正在尝试获取一个动态脚本来使嵌套注释发挥作用。

我的第一个问题是我不知道如何进行无限嵌套。目前我计划做 3 层，因为我不知道如何让它动态工作。

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

我想我的方法是错误的 - ng-model 元素没有绑定(bind)在 ng-repeat 内部，所有表单的值也将绑定(bind)到同一个元素......也许有人有一些提示。如果重要的话，我的后端运行 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>