我正在尝试使用嵌套注释的动态脚本。
我的第一个问题是我不知道如何做无尽的筑巢。现在我打算做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>
答案 0 :(得分：2)
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>