CODEWITHSUNDEEP
javascriptangularjsfacebookdata-binding2-way-object-databinding
Smokey
Smokey

Reputation: 1897

angularjs- data binding issue in textareas

I have built a timeline using angular js. Timeline shows post from users and other people can add comment for it. For that, I have provided a textarea. Setup is simple. i use ng-repeat to show timeline post (which can always be more than one) and as users can comment on each post, textarea is included along with it (like facebook timeline)

So, when I ng-repeat the content, textarea also gets repeated. That is exactly what I need.

But, data-binding is done. So when I type on a textarea, all textarea reflects it. It's like type on one comment textarea, all text-area will show being typed.

How can I avoid that? I'm new to angularJS

This is my sample code:

        <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>

Upvotes: 0

Views: 37

Answers (2)

Deep
Deep

Reputation: 9794

you are adding textarea with the ng-repeat and that why same model vm.comment.content is getting attached with all, this is why you are seeing the issue of write in one textarea and it displays on all.

you should have a comment property in each object of the array vm.posts and you can then bind it to the text area with ng-model="post.comment"

in controller 

$scope.posts = [{comment:""}];

in view.

    <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>

Upvotes: 1

Pankaj Parkar
Pankaj Parkar

Reputation: 136174

Because you are using same model value for all timelines, instead I'd suggest you to put comment model inside post object only. Make sure you have added comment property to each post record.

<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>

Upvotes: 1

Related Questions