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

Level 1｜｜2016/07/05

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

サンプルコード

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

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」となり、非表示に切り替わります。

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