在具有从另一个模型角度设置值的输入字段上使用ng-model

时间:2014-08-30 20:41:41

标签: javascript angularjs forms

我有一个输入字段,如果该数据可用(电子邮件地址,名字等),将预先填入用户信息

我最初使用$ scope.userData设置输入字段的值,当我在输入字段上设置ng-model属性时,前端的值为空。

示例:

用于显示值(输入字段包含用户电子邮件:

<input class="text-input" type="email" value="{{data.email}}">

不起作用(空白输入字段):

<input class="text-input" type="email" ng-model="formData.email" value="{{data.email}}">

我知道为什么这不起作用,formData.email是空白的,似乎模型将覆盖该值,但我需要将其保存到formData中,然后在提交表单时向我的服务发出POST请求。

我是角色的新手,我想用角度来做这个,而不是用jQuery作为拐杖。

那么我如何将电子邮件字段设置为在表单提交期间使用的模型,但是如果存在,则使用初始电子邮件数据填充电子邮件字段的值?

2 个答案:

答案 0 :(得分:1)

您要执行的操作是在加载表单时执行以下代码:

formData.email = data.email

Angular为此提供了ngInit方法。让我们说你已经设置了一个名为initializeEmail的函数来执行此操作。然后,您需要在表单标记中添加类似的内容(或者知道formData是什么的任何地方):

<form ng-init="initializeEmail(data.email)>

然后,当角度加载时,它会看到此功能并正确设置formData的电子邮件字段。

答案 1 :(得分:-1)

AngularJS使用双向绑定。

这意味着如果您使用ng-model="formData.email"在输入中写入内容,则范围值将更改,并且在控制器中,它将作为$scope.formData.email访问。如果您更改控制器中$scope.formData.email的值,它会自动更新视图中<input />的值。

要设置默认地址,您应该从输入中删除value属性,并在控制器开头的JavaScript中设置$scope.formData.email的值。

我建议你阅读官方basic tutorial。那里的一切都很好描述。