在ng-repeat中提交表单时报错:Cannot read property 'comment' of undefined

我不能在ng-repeat中提交表单,报以下错误:

TypeError: Cannot read property 'comment' of undefined

然而,如果我在 ng-repeat 的表单之外的评论表单工作,如何在 ng-repeat 中提交表单?

注:我用的是 laravel 5.5, angular 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>


解决方法:

由于$ scope中没有任何post,无法访问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[index].comment

本文由 w3cmark_前端笔记 版权所有,转载时请注明出处。
注明出处格式:w3cmark (http://www.w3cmark.com/a/jishuwenda/2017/1203/573.html)

分享到:

关注w3cmark
微信公众号 w3cmark_com