AngularJSのng-if、ng-show、ng-hideを使って、指定したHTML要素を表示、非表示の切替えを行う事が出来ます。
デモとコードサンプルはこちら。
※目次をクリックすると目次の下部にコンテンツが表示されます。
ng-ifディレクティブ
○構文
<ANY
ng-if=”exp”>
…
</ANY>
ng-if=”exp”のexpがtrueの場合は、<ANY>~</ANY>のHTML要素をDOMに追加し、falseの場合はDOMから削除する事によって、表示、非表示を切替える事が出来ます。
<ANY
ng-if=”exp”>
…
</ANY>
ng-if=”exp”のexpがtrueの場合は、<ANY>~</ANY>のHTML要素をDOMに追加し、falseの場合はDOMから削除する事によって、表示、非表示を切替える事が出来ます。
ng-show、ng-hideディレクティブ
○構文
<ANY
ng-showまたはng-hide=”exp”>
…
</ANY>
ng-show=”exp”のexpがfalseの場合(ng-hide=”exp”のexpがtrue)の場合は、デフォルトで用意されている”ng-hide”CSSクラス(display: none !important;)が自動で追加され、<ANY>~</ANY>のHTML要素が非表示となります。
ng-ifのようにDOMから追加、削除しているわけではなく、CSSで表示、非表示を切替えています。
<ANY
ng-showまたはng-hide=”exp”>
…
</ANY>
ng-show=”exp”のexpがfalseの場合(ng-hide=”exp”のexpがtrue)の場合は、デフォルトで用意されている”ng-hide”CSSクラス(display: none !important;)が自動で追加され、<ANY>~</ANY>のHTML要素が非表示となります。
ng-ifのようにDOMから追加、削除しているわけではなく、CSSで表示、非表示を切替えています。
サンプルコード
デモとコードサンプルはこちら。
1)チェックボックスで表示、非表示を切り替え
下記サンプルでは、チェックボックスの入力結果によって”detail”のtrue、falseが切り替るので、年齢と住所の部分の表示を切替える事が出来ます。
下記例ではng-ifディレクティブを使用していますが、ng-showディレクティブでも同様の結果となります。
1)チェックボックスで表示、非表示を切り替え
下記サンプルでは、チェックボックスの入力結果によって”detail”のtrue、falseが切り替るので、年齢と住所の部分の表示を切替える事が出来ます。
下記例ではng-ifディレクティブを使用していますが、ng-showディレクティブでも同様の結果となります。
<div class="checkbox"> <label> <input type="checkbox" ng-model="detail" />詳細表示 </label> </div> <ul> <li ng-repeat="person in people1">{{person.name}} <div ng-if="detail"> <ul> <li>年齢:{{person.age}}</li> <li>住所:{{person.address}}</li> </ul> </div> </li> </ul>
2)モデルデータの属性に応じて表示、非表示を切替える
下記例では、モデルデータのage_vとaddress_vのtrue/falseの設定に応じて各メンバーの住所、年齢の表示、非表示を切替えています。
そして、この例では詳細表示部分の1行目の年齢を下記のようにCSSの設定を行っています。
.detail > *:first-child {font-weight: bold}
ng-ifディレクティブを使用すると年齢部分のHTML要素が削除され、住所部分の要素が1行目となってしまい、住所が太字表示となってしまいます。
この例では、年齢部分を太字表示にしようとしているので、ng-ifディレクティブではなく、ng-showディレクティブを使用する必要があります。
(HTML) <style> .detail > *:first-child {font-weight: bold} </style> <ul> <li ng-repeat="person in people1">{{person.name}} <ul class="detail"> <li ng-show="person.age_v">年齢:{{person.age}}</li> <li ng-show="person.address_v">住所:{{person.address}}</li> </ul> </li> </ul> (スクリプト) $scope.people1 = [ { name: "相田", age: 20, age_v: true, address: "東京都品川区",address_v: false}, { name: "伊藤", age: 55, age_v: false, address: "神奈川県横浜市",address_v:true}, { name: "上野", age: 20, age_v: true,address: "埼玉県川越市",address_v: true}, { name: "江藤", age: 37, age_v: false,address: "東京都世田谷区",address_v: false} ];
AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchを使って内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ
AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchで内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ