angularjs- 文本区域中的数据绑定问题

Question

我使用 angular js 构建了一个时间轴。时间线显示 post 来自用户，其他人可以为其添加评论。为此，我提供了一个文本区域。设置很简单。我使用 ng-repeat 来显示时间线 post（它总是可以超过一个）并且因为用户可以对每个 post 发表评论，textarea 也包含在内（就像 facebook 时间线）

因此，当我 ng-repeat 内容时，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

您正在添加 textarea 和 ng-repeat，这就是为什么相同的模型 vm.comment.content 与所有人联系在一起，这就是为什么您会看到在一个 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>

angularjs- 文本区域中的数据绑定问题

angularjs- data binding issue in textareas

javascript

data-binding

facebook

2-way-object-databinding

angularjs