未定义的属性提交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

回到顶部