セレクトから選択して表示を切替え。

Level 1｜｜2016/07/06

今回は、「ng-module」モジュールと、「ng-options」「ng-switch」を使って、セレクトボックスで選択した値と紐づいているメッセージを表示させます。

サンプルコード

agularJSのng-switch属性を使ったサンプルをご覧ください。
サンプルは、JS側で設定した項目がセレクトボックスに表示され、選択した値と紐づいている文章を出力しています。

HTMLファイル

<h1>セレクトから選択して、表示を切替え</h1>
<select ng-model="selection" ng-options="item for item in items"></select>
<code>selection={{selection}}</code>
<div ng-switch="selection">
    <div ng-switch-when="Bootstrapを併用">Bootstrapを併用</div>
    <div ng-switch-when="AnglarJSとは">インポート方法</div>
    <div ng-switch-when="インポート方法">AnglarJSとは、Googleが作ったjavascriptフレームワークです。</div>
    <div ng-switch-default>項目を選択すると、ここのメッセージが変わります。</div>
</div>
            

JSファイル

$scope.items = ['選択してください。','AnglarJSとは', 'インポート方法', 'Bootstrapを併用'];
$scope.selection = $scope.items[0];
            

HTMLファイル・JSファイルでの流れは、以下の通りです。
1）ng-moduleで、プロパティを設定します。
2）ng-optionsで、ラベルテキストを表示します。
3）ng-switchで、ラベルテキストと合うng-switch-when要素が表示されます。
 
それぞれを詳しく見てきましょう！

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

<select ng-model="selection" ng-options="item for item in items"></select>
<div ng-switch="selection">
            

ng-module「selection」のプロパティを使って、セレクトボックスの値とオプションを関連付けることができます。
上記サンプルでは、ng-moduleのプロパティを「selection」にし、ng-switchの式も「selection」にすることで、関連付けできます。

2）ng-optionsで、ラベルテキストを表示します。

<HTMLtag ng-options="ラベルテキスト for 要素 in 配列"></HTMLtag>

<select ng-model="selection" ng-options="item for item in items"></select>
            

ng-options属性は、要素をラベルテキストとしてng-modelに渡します。今回はJS側で項目を設定しています。
ng-options属性　構文の書き方はこちら

$scope.items = ['選択してください。','AnglarJSとは', 'インポート方法', 'Bootstrapを併用'];
$scope.selection = $scope.items[0];
            

JS側では、配列を$scope.itemsにセットし、「selection」に格納しています。
$scope.items[0]の数値は、デフォルトで表示する要素を決めます。この場合、0なので「選択してください」がデフォルトで表示されます。HTML側では、デフォルトで表示する要素をng-switch-defaultで指定しておきます。

3）ng-switchで、ラベルテキストと合うng-switch-when要素が表示されます。

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

<div ng-switch="selection">
    <div ng-switch-when="Bootstrapを併用">Bootstrapを併用</div>
    <div ng-switch-when="AnglarJSとは">インポート方法</div>
    <div ng-switch-when="インポート方法">AnglarJSとは、Googleが作ったjavascriptフレームワークです。</div>
    <div ng-switch-default>項目を選択すると、ここのメッセージが変わります。</div>
</div>
            

ng-switch属性は、Javascriptのswitchと同じです。
式の値に合致するコンテンツを表示します。

<HTMLtag ng-switch-when="値"></HTMLtag>

<HTMLtag ng-switch-default></HTMLtag>

ng-switch属性で得た値と、ng-switch-whenの値を見て、一致する値を表示します。
また、ng-switch-defaultは、デフォルトで表示したいものを指定できます。また、セレクトボックスで選択された値と一致しない場合にも、表示されるようになります。

これで、セレクトから選択して表示を切替えサンプルが完了です。