AngularJSでフォーム入力を検証しよう

AngularJSのモデルのデータをオブジェクトにまとめる

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
AngularJSの複数のモデルのデータを、ひとつのオブジェクトにまとめます。
講師:
05:33

字幕

このレッスンでは AngularJS の 複数のモデルのデータを ひとつのオブジェクトにまとめる 方法についてご紹介します 現在開いている HTML ドキュメントは モデルのデータがひとつだけ 設定されています まず AngularJS の アプリケーションなんですが このセクションの要素ですね ng-app が設定されていて そしてモデルが このインプットの要素です そこに ng-model message という 名前が定められていて そのメッセージのデータの中身が 「以下の項目を入力してください」と言う 下に表示されるようになっています では今現在の状態を確認しましょう 「ファイル」から 「ブラウザでプレビュー」します そしてこのインプット要素ですね ここに名前を入力すると それがこのテキストの下に表示されます ダイナミックにデータが 書き換わります 今度は2番目のインプットの要素ですね 「性」の方にも同じように モデルを設定したいと思います DreamWeaver の画面は コードビューにしてしまいましょう ここにやはりモデルを設定すればいいので この部分をコピーして持ってきます message というのは名前が 適当ではないので “firstname” “lastname” という風に変えましょう コピーして ペーストですね それから lastname の方も同じように コピーして ペーストします 確認用にやはりこの p 要素の中に 波括弧をダブルで打ち込んで ここに firstname と lastname をコピーします これで改めて確認してみましょう ファイルを保存して ブラウザでプレビューです まず名前の方は先ほどと変わりません そして今度は性の方も加わりましたから ちゃんとフルネームが表示されました これはこれでいいんですけれども モデルが複数になって数が増えると まとめるのが大変ですね ですからこれをひとつの オブジェクトにしたいと思います では DreamWeaver に戻りましょう オブジェクトのプロパティに アクセスする時には オブジェクト名 . (ドット) プロパティ名ですね その形にしてしまえばオブジェクトの中で データを設定することができます ここで例えばユーザーとしましょう user. という風にするとユーザーと オブジェクトが出来上がって その中のプロパティとして firstname が入ります ですからこれを同じようにコピーして 持ってくると 今度はモデルが別々でなく ユーザーというひとつのオブジェクトになって その中の違うプロパティとして データが保管されることになります ではこの同じ要領でやっていきましょう ここまででいいですかね コピーを今度は「メールアドレス」の方に 持っていきます そしてダブルクウォーテーションは閉じて この段階でもうひとつ コピーしちゃいましょうか 「パスワード」の方にも コピーを持っていきます そしてプロパティ名は 当然変えないといけませんので user.email ですね それから user.password ということで コピーを持ってきます これでモデルはデータが4つ あるんですけども すべて user というオブジェクトの中に プロパティとして設定されます それからテキストの下の この変数のところですね ここを「user」に変更します あとフォームの属性として 「no validate」にしておきましょう これで保存をして確認します ファイルを保存して ブラウザでプレビューします では入力しますが ちょっと表示の仕方が変わります オブジェクトですので 波括弧で囲まれて その中に 名前ですね プロパティの名前と それからデータが入ってきます あとも同様です メールアドレス それからパスワードですね もちろんパスワード データとしては見えてしまっています このようにして ひとつのオブジェクトの中に プロパティの形で各データが入ると まとめて管理ができて便利です このレッスンでは AngularJS の モデルの複数のデータを ひとつのオブジェクトにまとめる 方法についてご説明しました その場合にはモデルの名前をつける時に オブジェクト名 .(ドット)というものを 共通につけてあげればいいということでした

AngularJSでフォーム入力を検証しよう

AngularJSはHTMLを拡張するフレームワークです。Webページを動的に操作することができます。このコースではCSSとJavaScriptの基礎を学んだ方向けに、AngularJSを使った入力フォームの処理の仕方について解説します。インストール方法や動作確認、テキストの表示やデータ形式のチェック、入力に応じたスタイルの変更などをひと通り説明します。

1時間12分 (13 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年04月04日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。