当输入不需要时，制作和角形无效

Question

我直接在用户的个人资料页面上制作个人资料编辑器，我想在其中显示他们所做更改的实时预览。

我基本上使用附加到输入和textareas的模型更新视图。

这是一个预览，显示名称，个人资料图片，标题图片和一点点模糊：

我们的想法是更新实时（尚未提交），以便用户可以在保存更改之前预览他们正在做的事情。

所以我遇到的问题是，我不想要任何字段，因为我希望他们可以选择更新他们的个人资料，这样他们就可以选择更新个人资料图片，标题或文字。

<div class="profile-editor" ng-if="name == '<?php echo $_SESSION['user']; ?>'">

<div class="current" style="background-image: url({{profile.background}});">
  <img class="photo" src="{{ updateProfileForm.photoUrl.$valid ? editPhoto : profile.photo }}" alt="">
  <h3>{{profile.username}}</h3>
  <p>{{ updateProfileForm.blurbEdit.$valid ? editBlurb : profile.blurb }}</p>
  <p ng-if="editingProfile" class="new-blurb">{{editBlurb}}</p>
  <p class="preview">preview</p>
</div>

<div class="save-editor">

  <p ng-repeat="element in updateProfileForm">
    {{element.$valid}}
  </p>

  <h1>Update Profile</h1>
  <p>{{information}}</p>

  <form role="form" name="updateProfileForm">
    <input name="backgroundUrl" class="edit-name-input" type="text" ng-model="editPhoto" placeholder="paste new photo url">

    <input name="photoUrl" class="edit-photo-input" type="text" ng-model="editBackground" placeholder="paste new background url">

    <textarea name="blurbEdit" class="edit-blurb" name="" id="" cols="30" rows="10" ng-model="editBlurb" placeholder="NEW BLURB"></textarea>

    <button ng-click="updateProfile(editPhoto,editBackground,editBlurb)" class="save-profile">save profile</button>
  </form>
</div>

然而，在这样做时，由于它们不是必需的，因此角度表示表单在加载时有效（这在技术上是正确的）但是发生了什么是我的视图被更改并且没有显示任何内容，因为字段显示为有效：

我该如何处理？

Answer 1

最简单的解决方案可能是为用户提供一个已填充当前值的表单。

Answer 2

对我来说，我会预先在数据中设置默认值，可能在控制器中。我定义了对象或属性，检查是否有设定值，如果没有，我会分配默认值。然后，我只是在视图的可编辑和显示点上分享对模型的引用。

ng-model="profileBackground"`, for example.`

这在这里看起来似乎并不完全有用，但它会让您看到来自其他来源的那些值。如果模型在一个地方发生变化，其他地方更容易跟随更新的信息。