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

これはここではまったく役に立たないように見えるかもしれませんが、他のソースからそれらの値を監視できるようになります。モデルが 1 つの場所で変更された場合、残りの部分は更新された情報に従って簡単に追跡できます。

于 2015-05-21T15:55:03.490 に答える