AngularJS - 多种形式 - 一种ng模型?

时间:2014-02-27 19:08:09

标签: forms angularjs


假设我有类似Twitter的网站,其中包含消息。您可以在消息中添加评论功能。

因此,我遍历每条消息并显示评论表单:

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

问题在于,当我在一条消息下键入注释时,它会显示在所有输入上,这不是我想要的行为。

  • 禁用禁用=“true”其他输入字段无效。

以下是代码:plnkr

2 个答案:

答案 0 :(得分:4)

根据您提供的代码,所有文本输入都绑定到相同的ng-model变量。因此,当其中一个值发生变化时,它们将被更新。最好将注释存储为原始对象的一部分。

在控制器中:

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

在html中:

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

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

答案 1 :(得分:1)

您正在使用script.js中声明的对象commentForm,这是唯一的。

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

将在每个“msg”对象中为您创建一个字段commentForm。