3

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

我基本上是使用附加到输入和文本区域的模型来更新视图。

这是一个预览，显示名称、个人资料图片、标题图片和一些简介：

这是图像预览，显示名称、个人资料图像、标题图像和一些简介

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

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

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

但是，在这样做时，由于它们不是必需的，因此 angular 表示表单在加载时有效（这在技术上是正确的）但发生的情况是我的视图发生了变化并且没有显示任何内容，因为字段显示为有效：

显示空值的图像

我将如何处理这个？

4

2 回答 2

2

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

于 2015-05-21T15:08:02.443 回答
1

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

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

这在这里可能看起来并不完全有用，但它让您可以从其他来源查看这些值。如果模型在一个地方发生了变化，其余的人就更容易跟随更新的信息。

于 2015-05-21T15:55:03.490 回答