angularjs- textareas中的数据绑定问题

Question

我已经使用angular js建立了一个时间轴。 时间轴显示来自用户的帖子，其他人可以为其添加评论。 为此，我提供了一个文本区域。 设置很简单。 我使用ng-repeat来显示时间轴帖子（总是可以不止一个），并且由于用户可以在每个帖子上发表评论，因此textarea也随它一起被包含（例如Facebook时间轴）

因此，当我重复内容时，textarea也将重复。 那正是我所需要的。

但是，数据绑定已完成。 因此，当我键入文本区域时，所有文本区域都会反映出来。 就像在一个注释文本区域上键入，所有文本区域都将显示正在键入。

我该如何避免呢？ 我是angularJS的新手

这是我的示例代码：

        <li class="media post" ng-repeat="post in vm.posts">
            <div class="post-main">
              this is a static post
            </div>

                <div class="media comment-textarea">

                    <div class="media-body">
                        <textarea class="form-control" placeholder="Type here..." rows="1" ng-model="vm.comment.content"></textarea>
                        <a class="btn btn-primary " ng-click="vm.addComment(post,vm.currentComment.content)">
                            <i class="fa fa-paper-plane"></i>
                        </a>    
                    </div>
                </div>
            </div>
        </li>

Answer 1

您正在使用ng-repeat添加textarea ，并且为什么同一个模型vm.comment.content将与所有附件连接在一起，这就是为什么您看到在一个textarea中写问题并在所有textarea上显示的原因。

您应该在数组vm.posts的每个对象中都有一个comment属性，然后可以使用ng-model =“ post.comment”将其绑定到文本区域

在控制器中

$scope.posts = [{comment:""}];

在视野中。

    <li class="media post" ng-repeat="post in vm.posts">
        <div class="post-main">
          this is a static post
        </div>

            <div class="media comment-textarea">

                <div class="media-body">
                    <textarea class="form-control" placeholder="Type here..." rows="1" ng-model="vm.comment"></textarea>
                    <a class="btn btn-primary " ng-click="vm.addComment(post)">
                        <i class="fa fa-paper-plane"></i>
                    </a>    
                </div>
            </div>
        </div>
    </li>

Answer 2

因为您对所有时间线都使用相同的model值，所以我建议您仅将comment模型放入post对象中。 确保已将注释属性添加到每个post记录。

<li class="media post" ng-repeat="post in vm.posts">
    <div class="post-main">
      this is a static post
    </div>

        <div class="media comment-textarea">

            <div class="media-body">
                <textarea class="form-control" placeholder="Type here..." rows="1" 
                   ng-model="post.comment.content"></textarea>
                <a class="btn btn-primary " ng-click="vm.addComment(post,post.comment.content)">
                    <i class="fa fa-paper-plane"></i>
                </a>    
            </div>
        </div>
    </div>
</li>