AngularJs入門「アズ勉。」

アズ勉。AngularJs v1.5.7を、ズブの初心者が、勉強した

  1. HOME
  2. アズ勉。ノート一覧
  3. チェックの真偽で表示/非表示を切替え

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

Level 1||2016/07/05

今回は、「ng-module」モジュールと、「ng-if」「ng-init」を使い、チェックしたかどうかを判定し、チェックしたらメッセージを表示、チェックを外したらメッセージを非表示にさせます。

サンプルコード

agularJSのng-init属性とng-if属性を使ったサンプルを確認してください。。
サンプルは、チェックされた項目に関連付いている文章が出力されていますが、チェックされていない項目は、文章が表示されていません。チェックしたり、外すと、文章の表示/非表示を切り替えます。

チェックしたら特定の箇所の表示/非表示を切替え

コーヒーは、心臓病や脳卒中に良い? ng-initの値:{{checked01}}

国立がん研究センターの研究では、コーヒーを毎日3~4杯飲む人は心臓病や脳卒中の死亡率が低い傾向があるとの結果がでました。

カビの撃退法 ng-initの値:{{checked02}}

カビの根を根絶するためは、ゴムパッキンの奥を50度以上にする必要があります。

HTMLファイル


<div>
<h1>チェックしたら特定の箇所の表示/非表示を切替え</h1>

1)ng-moduleでプロパティを設定 
2)ng-initで初期値を設定
<label>
    <input type="checkbox" ng-model="checked01" ng-init="checked01=true" />
</label>
<strong>コーヒーは、心臓病や脳卒中に良い?</strong>
 ng-initの値:{{checked01}}

3)ng-ifで表示(true)/非表示(false)を切替え
<p ng-if="checked01">国立がん研究センターの研究では、---中略---</p>

<label>
    <input type="checkbox" ng-model="checked02" ng-init="checked02=false" />
</label>
<strong>カビの撃退法</strong>
<p ng-if="checked02">カビの根を根絶するためは、---中略---</p>

</div>

            

HTMLファイルでの流れは、以下の通りです。
1)ng-moduleでプロパティを設定します。
2)ng-initで初期値を設定します。
3)ng-ifで表示(true)/非表示(false)を切替えます。

 
それぞれを詳しく見てきましょう!

1)ng-moduleでプロパティを設定


<input type="checkbox" ng-model="checked01" ng-init="checked01=true" />
<p ng-if="checked01">国立がん研究センターの研究では、---中略---</p>
            

ng-moduleのプロパティを使って、チェックボックスの値と文章を関連付けることができます。
上記サンプルでは、ng-moduleのプロパティを「checked01」にし、ng-init と ng-if 「checked01」を使用することで、関連付けされていることが分かります。

2)ng-init属性で初期値を設定

<HTMLtag ng-init="式"></HTMLtag>

ng-init属性は、初期値を設定できます。今回のサンプルでは、ng-if属性に対して、初期の「checked01」の値が、「ture」か「false」かを返しています。


<input type="checkbox" ng-model="checked01" ng-init="checked01=true" />
ng-initの値:{{checked01}}
            

また、プロパティを使ってng-init属性の結果を、AngularJSで出力することもできます。

3)ng-if属性で表示/非表示を切替え

<HTMLtag ng-if="式"></HTMLtag>

ng-if属性は、Javascriptのifと同じです。
もし、値がtureなら表示、値がfalseなら非表示を切り替えます。
ng-init属性で設定された初期値を取得後、チェックを外されたら「false」となり、非表示に切り替わります。

これで、チェックの真偽を取得し、表示/非表示を切替えサンプルができました。

このサイトはLiruu Design(リールーデザイン)が運営しています

WEBデザイン制作
WEBショーケース
Liruu Blog