VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで

AngularJSのng-switchを使って内部にあるHTMLテンプレートの表示を切り替え

AngularJSのng-switchを使って、同じHTMLファイル内にある複数のHTMLテンプレートを選択して表示を切替える事ができます。

デモとコードサンプルはこちら
 
別の記事で紹介したng-includeでも条件に応じてHTMLテンプレートの表示を切替える事ができますが、ng-includeはアクセスがあった時点で外部HTMLをダウンロードしてから表示します。
 
一方、ng-switchでは同じHTMLファイル内に記述されているのでアクセスに関わらずダウンロード済みで、選択に応じて表示を切替えます。
 
下記のようにラジオボタンで選択した値(変数switch)の値に応じてHTMLテンプレートが選択されて表示されます。
 
何も選択されていない場合は、ng-switch-defaultで指定した内容が表示されます。
 

<form>
  <input type="radio" ng-model="switch" value="list">リスト
   :
</form>
<div ng-switch on="switch">
  <div ng-switch-when="table">
    :
    :テンプレートHTML
    :
  </div>
  <div ng-switch-when="list">
    :
    :テンプレートHTML
    :
  </div>
  <div ng-switch-when="accordion">
    :
    :テンプレートHTML
    :
  </div>
  <div ng-switch-default>
    上のラジオボタンで選択したフォーマットでデータが表示されます。
  </div>
</div>
モバイルバージョンを終了