angularjs- data binding issue in textareas

Question

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>

Pankaj Parkar · Accepted Answer · 2016-07-10 17:30:33Z

1

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>

answered Jul 10, 2016 at 17:30

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Smokey Over a year ago

Ok, let me try this. @Pankaj Parkar

Deep · Accepted Answer · 2016-07-10 17:38:44Z

1

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>

edited Jul 10, 2016 at 17:38

answered Jul 10, 2016 at 17:30

Deep

9,7962 gold badges24 silver badges34 bronze badges

3 Comments

Smokey Over a year ago

How to avoid that? I have to save these comments to database as well. @Deep

Deep Over a year ago

@SajeevC : i proposed a solution above, using that you will be able to save the entire data with Posts array

Smokey Over a year ago

Thanks, Deep! @Deep

Collectives™ on Stack Overflow

angularjs- data binding issue in textareas

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related