在具有從另一個模型角度設置值的輸入字段上使用ng-model

Question

我有一個輸入字段，如果該數據可用（電子郵件地址，名字等），它將預先填充用戶信息。

我最初使用$ 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作為拐杖。

那么，如何將電子郵件字段設置為在表單提交期間使用的模型，但是如何使用初始電子郵件數據（如果存在）填充電子郵件字段的值？

Answer 1

您要做的是在加載表單時執行以下代碼：

formData.email = data.email

Angular為此具有ngInit方法。 假設您在某個地方設置了一個名為initializeEmail的函數來執行此操作。 然后，您需要在form標記內（或任何知道formData是什么的地方）添加類似以下內容：

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

然后，當角度加載時，它將看到此功能並適當設置formData的電子郵件字段。

Answer 2

AngularJS使用雙向綁定。

這意味着，如果您使用ng-model="formData.email"在輸入中編寫內容，則范圍值將更改，並且在控制器中它將可以通過$scope.formData.email進行訪問。 而且，如果您在控制器中更改$scope.formData.email的值，它將在視圖中自動更新<input />的值。

要設置默認地址，您應該從輸入中刪除value屬性，並在控制器開始處的JavaScript中設置$scope.formData.email的值。

我建議您閱讀官方的基本教程 。 那里的一切都很好地描述了。