~Linux、MySQLからAJAXまでAngularJSのng-if、ng-show、ng-hideを使って表示、非表示を切り替えAngularJSのng-if、ng-show、ng-hideを使って、指定したHTML要素を表示、非表示の切替えを行う事が出来ます。デモとコードサンプルはこちら。※目次をクリックすると目次の下部にコンテンツが表示されます。1.ng-ifディレクティブ2.ng-show、ng-hideディレクティブ3.サンプルコードng-ifディレクティブ○構文<ANYng-if=”exp”>...</ANY>ng-if=”exp”のexpがtrueの場合は、<ANY>~</ANY>のHTML要素をDOMに追加し、falseの場合はDOMから削除する事によって、表示、非表示を切替える事が出来ます。!important;)が自動で追加され、<ANY>~</ANY>のHTML要素が非表示となります。ng-ifのようにDOMから追加、削除しているわけではなく、CSSで表示、非表示を切替えています。サンプルコードデモとコードサンプルはこちら。1)チェックボックスで表示、非表示を切り替え下記サンプルでは、チェックボックスの入力結果によって”detail”のtrue、falseが切り替るので、年齢と住所の部分の表示を切替える事が出来ます。下記例ではng-ifディレクティブを使用していますが、ng-showディレクティブでも同様の結果となります。</ul>2)モデルデータの属性に応じて表示、非表示を切替える下記例では、モデルデータのage_vとaddress_vのtrue/falseの設定に応じて各メンバーの住所、年齢の表示、非表示を切替えています。この例では詳細表示部分の1行目の年齢を下記のようにCSSの設定を行っています。bold}ng-ifディレクティブを使用すると年齢部分のHTML要素が削除され、住所部分の要素が1行目となってしまい、住所が太字表示となってしまいます。この例では、年齢部分を太字表示にしようとしているので、ng-ifディレクティブではなく、ng-showディレクティブを使用する必要があります。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。WordPressモバイルバージョンに。