AngularJSのng-includeを使って別のHTMLファイルを埋め込み

AngularJSのng-includeを使って、共通で使用するHTMLコードを別のHTMLファイルとして作成してメインのHTMLに埋め込んだり、条件に応じて異なる内容のHTMLを埋めん込んだりする事が出来ます。

デモとコードサンプルはこちら。
　

（１）ng-includeを使って外部ファイルのHTMLを埋め込み

　
①別のHTMLファイルを作成

<table class="table">
  <thead>
    <tr><th>名前</th><th>年齢</th><th>住所</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in people">
      <td>{{person.name}}</td>
      <td>{{person.age}}</td>
      <td>{{person.address}}</td>
    </tr>
  </tbody>
</table>

②メインのHTMLファイルでng-includeディレクティブを使って別のHTMLファイルを埋め込み
　
埋め込みたい場所に下記のようにng-includeディレクティブを指定します。src属性にHTMLファイルのURLを指定します。
　
<ng-include src=”‘http://example.com/wp-content/themes/wp/template/include_table.html'”></ng-include>

（２）条件に応じて表示するHTMLを切り替える例

　
ng-includeディレクティブのsrc属性に関数などの式を指定し、条件に応じて表示するHTMLファイルを切替えることも出来ます。
　
下記例では、ラジオボタンの選択結果に応じて表示するHTMLファイルを切替えています。

（HTML）
<form>
<input type="radio" ng-model="includeFile" value="list">リスト<input type="radio" ng-model="includeFile" value="table">表
</form>
<ng-include src="switchHtml()"></ng-include>
　
（スクリプト）
var url = 'http://example.com/wp-content/themes/wp/template/';

$scope.switchHtml = function () {
  if ($scope.includeFile == "list"){
    return url + "include_list.html";
  } else if ($scope.includeFile == "table"){
    return url + "include_table.html";
  }
}