未定义的属性提交NG重复内部形式
我无法提交内部表单时NG-再说一遍,我得到以下错误未定义的属性提交NG重复内部形式
TypeError: Cannot read property 'comment' of undefined
但是如果我把评论的形式之外NG-重复形式作品,你如何在ng-repeat内提交表格?
我看到引用了这个,但并不真正理解。
ng-form inside ng-repeat with submit button outside of ng-repeat
注:即时通讯使用laravel 5.5,角1.6V
main.js
$scope.myposts = []; // Form that works outside of ng-repeat adding posts which works flawlessly
$scope.addPost = function(){
$http.post('/auth/post', {
body: $scope.post.body,
}).then(function(data, status, headers, config){
console.log(data);
data.data['user'] = {
name: data.data.name
},
$scope.myposts.push(data.data);
});
$scope.post.body = '';
};
// comment form that doesnt work inside ng-repeat
$scope.addComment = function(){
$http.post('/post/comment',{
comment_body: $scope.post.comment,
}).then(function(result){
console.log(result.data);
$scope.myposts.push(result.data);
});
};
的Html
<div id="mypost" class="col-md-10 panel-default" ng-repeat="post in myposts "> <!-- beginnging of ng-repeat post in myposts -->
<div id="eli-style-heading" class="panel-heading"><a class="link_profile" href="/profile/<% post.user.name | lowercase %>"><% post.user.name %></a></div>
<div class="panel-body panel" ng-init="getLikeText(post); getLikecount(post)">
<i style="color:tomato; float:right; font-size:24px;" ng-click="like(post); toggle = !toggle"
ng-class="{[noheart] : !post.likedByMe, [heart]: post.likedByMe }">
<h3 style="font-size:20px; margin:20px 0px; text-align:center;" ng-bind="post.likesCount"> </h3>
</i>
<figure>
<p class="mybody2" ng-model="post.body" editable-text="post.body" e-form="textBtnForm"> <% post.body %></p>
<p name="post.created_at" ><% post.createdAt %> </p>
</figure>
<span>
<i style="color:red;" class="glyphicon glyphicon-remove" ng-click="deletePost(post)" ng-if="post.deletable"></i>
<button ng-if="post.update" class="btn btn-default" ng-click="textBtnForm.$show()" ng-hide="textBtnForm.$visible">
Edit
</button>
<span><button ng-if="post.update" type="submit" class="btn btn-primary" ng-click="updatePost(post)">Update</button></span>
</span>
<hr>
<span class="toggle-comments">
<a ng-show="post.comments.length !== 0" ng-click="comments = !comments" > View Comments</a>
<a ng-click="writecomment =! writecomment"> Write A Comment </a>
</span>
</div>
<div ng-show="comments" id="comments" class="col-md-offset-2 panel-default">
<div style="font-size:10px;" id="eli-style-heading" class="panel-heading">
<h6><% comment.user.name %><h6>
</div>
<figure>
<p style="padding:10px; min-height:50px; word-wrap:break-word;"> <% comment.comment_body%></p>
</figure>
</div>
<!-- Comment form Inside Ng-repeat -->
<div class="comment-class animated bounceInUp" ng-show="writecomment">
<div class="panel-body">
<ng-form ng-model="commentForm" name="commentForm" method="POST" novalidate>
<div class="form-group">
<label>Write a Comment</label>
<textarea ng-model="post.comment" type="text" class="form-control" name="comment_body" id="" cols="2" rows="2"></textarea>
</div>
<button id="eli-style-button" ng-click="addComment()" class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
<!-- END Comment form Inside Ng-repeat -->
</div>
<!-- End of ng-repeat post in mypost -->
</div>
回答:
因为有在$范围无后您无法访问post.comment,你可以改变你的函数
$scope.addComment = function(post){ $http.post('/post/comment',{
comment_body: post.comment,
}).then(function(result){
console.log(result.data);
$scope.myposts.push(result.data);
});
};
和HTML
<button id="eli-style-button" ng-click="addComment(post)" class="btn btn-primary" type="submit">Submit</button>
提交评论或通过索引并使用myposts [指数] .comment
以上是 未定义的属性提交NG重复内部形式 的全部内容, 来源链接: utcz.com/qa/260134.html