javascript - angularjs-文本区域中的数据绑定(bind)问题

Question

我使用 Angular JS 构建了一个时间线。时间线显示用户的帖子，其他人可以为其添加评论。为此，我提供了一个文本区域。 设置很简单。我使用 ng-repeat 来显示时间线帖子(总是可以不止一个)，并且由于用户可以对每个帖子发表评论，因此文本区域也随之包含在内(如 facebook 时间线)

因此，当我重复内容时，文本区域也会重复。这正是我所需要的。

但是，数据绑定(bind)已经完成。因此，当我在文本区域上键入内容时，所有文本区域都会反射(reflect)它。就像在一个评论文本区域上输入一样，所有文本区域都会显示正在输入。

我怎样才能避免这种情况？我是 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

因为您对所有时间线使用相同的 model 值，所以我建议您仅将 comment 模型放入帖子对象中。确保您已将评论属性添加到每个 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>