未定义的属性提交NG重复内部形式

Question

我无法提交内部表单时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> 

Answer 1

因为有在$范围无后您无法访问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