anglejs- textareasのデータバインディング問題

Question

私は角度jを使ってタイムラインを構築しました。タイムラインにはユーザーからの投稿が表示され、他のユーザーはコメントを追加できます。そのために、私はテキストエリアを提供しました。 セットアップは簡単です。私はng-repeatを使ってタイムラインの投稿を表示します（いつでも複数のことができます）。ユーザーが各投稿にコメントできるので、テキストエリアもそれに含まれます（Facebookのタイムラインのように）

したがって、コンテンツ、テキストエリアも繰り返されます。それはまさに私が必要とするものです。

しかし、データ結合が行われます。ですから、テキストエリアに入力すると、すべてのテキストエリアにテキストエリアが反映されます。 1つのコメントテキストエリアにタイプのようなものがあり、すべてのテキストエリアがタイプされて表示されます。

どうすれば避けることができますか？私は、これは私のサンプルコードです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> 

Answer 2

あなたはNGリピートでテキストエリアを追加していると、なぜ同じモデルvm.comment.contentが取得されていること添付されているので、1つの書込みの問題が表示されますテキストエリアすべてで表示されます。

あなたは、配列vm.postsの各オブジェクトにコメント性質を持っている必要がありますし、あなたがしてNG-モデル=「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>