コース: AngularJSで作る入力フォーム

ディレクティブで入力に応じて表示を切り替える

コース: AngularJSで作る入力フォーム

1ヶ月の無料トライアルを開始 法人向けサービス

ディレクティブで入力に応じて表示を切り替える

“

このレッスンでは AngularJS を使って input 要素のフィールドに データがあるかないかによって 表示と非表示を切り替える方法について ご説明しましょう 今現在は ng-app が section に設定されていて 各 input 要素にはそれぞれ ng-model ということで user. の後に それぞれプロパティが設定されています ですからこの user というオブジェクトの中に 各 input 要素の データが表示される ということになります 今現在の状態を確認しておきましょう 「ファイル」＞「ブラウザでプレビュー」 します 入力してみますと まず名前ですね ２つぐらいでいいでしょう このように user というオブジェクトの中に それぞれのデータが プロパティとして入っています 今回はこの最初のデータ これがあるかないかによって 表示を切り替えるような 形にしたいと思います この部分 テキストはちょっと打ち変えて このテキストを 入力をしたら出す というふうに設定をしなおしてみます まず入力を確認したい 入力してほしい input のタグに ディレクティブを１つ追加します ng-required です そしてこれは true false で設定するのですが 入力して下さい という時には true と設定します そうすることによって 入力したかしないかを AngularJS のほうで 確認することができます そして今度はこの p 要素 p タグのほうにも ディレクティブを加えます ng-show これが表示 非表示を 切り替えるためのディレクティブです そしてこの中に この form は myform ですね myform の中の .firstname これが required に設定すると ちゃんと入っているかどうか ということが確認できます そのためには .$invalid と ということで入力がないと 有効でないと このテキストが表示されます ということは firstname 姓名の名が入ってないわけですから 入力してください というテキストを書きましょう 「名を入力してください」 では確かめてみましょう これで 「ファイル」を「保存」して 「ブラウザでプレビュー」します 「名を入力してください」と 書いてありますね 言われた通り入力をしましょう そして入力をした瞬間に 消えるということです このレッスンでは input 要素のフィールドに データがあるかないかによって 表示を切り替えるという方法について ご説明しました そのために使ったディレクティブは ２つありまして まず入力を要求する場合 その input 要素に ng-required を true として 設定します 次に ng-show で表示 非表示を 切り替えるのですが その必要なデータの後に .$invalid これでデータがなかったという設定になる ということでした

目次