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

【问题标题】：Use ng-model on Input Field that Has Value Set From Another Model Angular在具有从另一个模型角度设置的值的输入字段上使用 ng-model
【发布时间】：2014-10-24 13:05:40
【问题描述】：

我有一个输入字段，如果该数据可用（电子邮件地址、名字等），该字段将预先填充用户信息

我最初使用 $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 请求。

我是 Angular 的新手，我想用 Angular 来做这件事，而不是使用 jQuery 作为拐杖。

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

【问题讨论】：

标签： javascript angularjs forms

【解决方案1】：

您要做的是在表单加载时执行以下代码：

formData.email = data.email

Angular 有为此目的的 ngInit 方法。假设您在某处设置了一个名为 initializeEmail 的函数来执行此操作。然后，您需要在您的表单标签内（或任何知道 formData 是什么的地方）添加类似的内容：

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

然后，当 angular 加载时，它会看到这个函数并适当地设置 formData 的电子邮件字段。

【讨论】：

我找不到关于 ng-load 的任何文档。我将 initEmail 函数添加到我的控制器中，感谢您的想法。
我的错，ngInit，不是 ngLoad。我已经相应地更新了我的答案。

【解决方案2】：

AngularJS 使用双向绑定。

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

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

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

【讨论】：