AngularJS模型绑定到多个文本框

我有以下问题：

假设我有一个帖子列表，我将使用

ng repeat

显示。在每篇文章（纯文本）之后，我想显示一个文本框和按钮。您可以在文本框中输入评论，按下按钮时，您将向该特定帖子添加评论

就像在这里：

我面临的问题是，如何将模型构建到$scope，以便每个特定的帖子都是唯一的

现在我有：

$scope.NewComment ={
    PostId: '',
    Comment: ''
};

如果我将

NewComment.Comment

绑定到文本区域，那么它将不起作用。。因为每个文本框实际上都适用于一篇文章

---

不知何故，我必须为每个帖子和评论生成动态模型，这听起来不是一个好的选择。

您可以在

post（）

函数中传递特定的评论，类似的东西（在sudo-jade语法中…）可能会起作用，但我不确定是否理解您的意图

div(ng-repeat = "post in post")
   {{post.title}}
   input(type="text", ng-model="post.commentText")
   button(ng-click = "postComment(post)")

在控制器中：

$scope.postComment = function (post) {
   console.log(post)
   newComment = {post_id:post.id, test:post.commentText}
}

---

这个问题可以通过使用具有隔离范围的角度指令来解决。这为创建的指令的每个实例提供了单独的作用域

指令的用法如下所示：

<comment-box ng-repeat="box in boxes" title="box.title" comment="box.comment">

模板html：

<div>
  <h3>{{title}}</h3>
  <input type="text" data-ng-model="comment"/>
  <button data-ng-click="displayComment()">Post</button>
</div>

{{title}}
邮递

以下是一个工作示例：

您可以将任何需要的内容传递到隔离范围（包括post id等），但这应该是一个很好的起点

---

希望这有帮助：-）

这听起来像是具有隔离作用域的指令的完美候选者：-）

<div>
  <h3>{{title}}</h3>
  <input type="text" data-ng-model="comment"/>
  <button data-ng-click="displayComment()">Post</button>
</div>