AngularJS - multiple forms - one ng-model?

Question

Let's say I have twitter-like website populated with messages. There is a feature that you can add comments to messages.

So, I iterate over each message and display a comment form:

<div class="" ng-repeat="msg in messages">
    <span>message: {{msg.message}}</span>
    <span>date {{msg.date}}</span>
    <form ng-submit="">
        <input type="text" ng-model="commentForm.comment">
        <button type="submit" value="send">
    </form>
</div>

The problem is that when I type comment under one message it's being displayed over all inputs, that's not the behavior I want.

Disabling with disabled="true" other input fields doesn't help.

Here is the code: plnkr

JeffryHouser · Accepted Answer · 2014-02-27 19:32:03Z

4

Based on the code you provided, all the text inputs bind to the same ng-model variable. So, when one of those values change they'll be updated. You may be better off storing the comment as part of the original object.

In the controller:

$scope.messages = [
    {'message': 'here goes some message',
        'date': '1-1-2014',
        'comment':''
    },
    {'message': 'here goes another message',
        'date': '2-2-2014',
        'comment':''
    }
];

And in the html:

<div class="" ng-repeat="msg in messages">
        <input type="text" ng-model="msg.comment">
</div>

http://plnkr.co/edit/DeUyHXsXJLUESXTAnwGY?p=preview

answered Feb 27, 2014 at 19:32

JeffryHouser

39.4k4 gold badges41 silver badges60 bronze badges

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

Comments

Oscar Franco · Accepted Answer · 2014-02-27 19:37:12Z

1

You are using the object commentForm declared in the script.js, which is unique.

<span>Comments:</span>
<form ng-submit="">
    <input type="text" ng-model="msg.commentForm">
    <button type="submit">send</button
</form>
<br>

Will create a field commentForm for you in each "msg" object.

answered Feb 27, 2014 at 19:37

Oscar Franco

6,3206 gold badges37 silver badges71 bronze badges

Collectives™ on Stack Overflow

AngularJS - multiple forms - one ng-model?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related