条件式の真偽に応じて表示/非表示

Level 1｜｜2016/07/15

前回、「チェックの真偽で表示/非表示を切替え。」で、ng-init属性とng-if属性を学びましたが、ng-show属性、ng-hide属性も表示/非表示ができる属性です。また、ng-open属性は、チェック/クリックと連動して、表示/非表示を切り替えます。

チェックの真偽で表示/非表示を切替えを見る

サンプルコード

angularJSのng-show属性とng-hide属性では、条件式の真偽に応じて表示/非表示を切り替えています。また、ng-open属性では、チェック/クリックに連動して切り替わっているのがわかります。

HTMLファイル

<h1>ng-show属性とng-hide属性</h1>
<label>チェックしてください。　<input type="checkbox" ng-model="checked"></label>
ng-show属性の場合:
<div ng-show="checked">
    <p>ng-show属性では、式が真の場合に有効になります。チェックされると、真になるので、ここが開きます。</p>
</div>
<div>
ng-hide属性の場合:
<div ng-hide="checked">
   <p>ng-hide属性では、式が偽の場合に有効になります。チェックが外されると、偽になるので、ここが開きます。</p>
</div>

<h1>ng-open属性</h1>
<label>チェックするか、「開閉」をクリックしてください。<input type="checkbox" ng-model="open"></label>
<details ng-open="open">
   <summary>開閉</summary>
   <p>表示/非表示を切り替えます。<br />ng-open属性の利用には、「details」タグ+「summary」タグが必要となります。※ブラウザによっては対応していないのでご注意ください。</p>
</details>
            

1) ng-show属性

<label>チェックしてください。　<input type="checkbox" ng-model="checked"></label>
ng-show属性の場合:
<div ng-show="checked">
    <p>ng-show属性では、式が真の場合に有効になります。チェックされると、真になるので、ここが開きます。</p>
</div>
            

HTMLtag ng-show="式">

angularJSのng-show属性では、チェックしたかどうかを判断し、真の場合（チェックされた）場合にのみ、有効になります。サンプルでは、inputタグにng-model="checked"を記述し、divタグのng-showで真偽か判断し、その配下のpタグの表示/非表示を切り替えています。

2）ng-hide属性

<div ng-hide="checked">
   <p>ng-hide属性では、式が偽の場合に有効になります。チェックが外されると、偽になるので、ここが開きます。</p>
</div>
            

HTMLtag ng-hide="式">

angularJSのng-hide属性では、チェックしたかどうかを判断し、偽の場合（チェックしていない）場合にのみ、有効になります。ng-show属性と全く逆です。サンプルでは、inputタグにng-model="checked"を記述し、divタグのng-hideで真偽か判断し、その配下のpタグの表示/非表示を切り替えています。

3）ng-open属性

<h1>ng-open属性</h1>
<label>チェックするか、「開閉」をクリックしてください。<input type="checkbox" ng-model="open"></label>
<details ng-open="open">
   <summary>開閉</summary>
   <p>表示/非表示を切り替えます。<br />ng-open属性の利用には、「details」タグ+「summary」タグが必要となります。※ブラウザによっては対応していないのでご注意ください。</p>
</details>
            

angularJSのng-open属性は、開閉を切り替える属性です。
先のng-show/ng-hideと同じく表示/非表示を切り替えますが、ちょっとだけ違うのが、detailsタグ+summaryタグが対象となります。他タグで記述しても動かないので、注意が必要です。
サンプルでは、inputタグにng-model="open"を指定し、detailsタグのng-open属性で、pタグの表示/非表示を切り替えています。
また、デフォルトで表示しておく文字列（サンプルでは「開閉」）は、summaryタグで囲っておけばOKです。