Question

我无法在ng-repeat中提交表单我收到以下错误

TypeError：无法读取属性＆＃39;评论＆＃39;未定义的

但是，如果我在ng-repeat之外的评论表单中，表单是否有效，那么如何在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>

Answer 1

由于您的$ scope中没有帖子您无法访问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

在ng-repeat中提交表单时未定义的属性

1 个答案: