AngularJS模型绑定到许多文本框

Question

我有以下问题：

假设我有一个我将使用ng-repeat显示的帖子列表。在每篇文章（纯文本）之后，我想显示一个文本框和按钮。您可以在文本框中输入注释，按下按钮时，您将为该特定帖子添加注释。

就像在这里：

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

现在我有：

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

如果我将NewComment.Comment绑定到textarea然后它将无法工作..因为每个文本框实际上都适用于一个帖子。

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

Answer 1

您可以通过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}
}

Answer 2

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

该指令的用法如下：

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

指令JavaScript：

app.directive('commentBox', function() {
  return {
    restrict: 'E',
    templateUrl: 'CommentBox.html',
    scope: {
      title: '=',
      comment: '='
    }
  }
});

模板html：

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

以下是一个工作示例：http://plnkr.co/edit/4Nw5jpJwH2q3kaIdwNYN?p=preview

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

希望这会有所帮助： - ）