<strong>１）Wayデータバインディング</strong>
<div>１）二重波括弧：私は{{country}}在住です。</div>
<div>２）ng-bind：私は<span ng-bind="country"></span>在住です。</div>
<div>３）二重波括弧：私は{{country}}在住の{{gender}}です。</div>
<div>４）ng-bind-template：私は{{country}}在住の{{gender}}です。</div>
<div ng-non-bindable>二重波括弧{{....}}を表示するには、ng-non-bindableを使用。</div>
　
<strong>２）２Wayデータバインディング</strong>
<div>私の名前は{{name}}です。</div>
名前:<input ng-model="name" />

<strong>１）ng-repeatを使って表を作成</strong>
<table class="table">
  <thead>
    <tr><th>名前</th><th>年齢</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in people">
      <td>{{person.name}}</td>
      <td>{{person.age}}</td>
    </tr>
  </tbody>
</table>

<strong>２）ng-repeatのビルトイン変数を使用</strong>
<table class="table">
  <thead>
    <tr><th>No.</th><th>名前</th><th>年齢</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in people" ng-class="$odd ? 'bg-success' : 'bg-warning'">
      <td>{{$index + 1}}</td>
      <td>{{person.name}}</td>
      <td>{{person.age}}</td>
    </tr>
  </tbody>
</table>

<strong>３）ng-repeatを入力文字列でフィルター</strong>

フィルター：<input ng-model="query" type="text" placeholder="表示したい名前、住所、年齢を入力" autofocus>
<ul>
  <li ng-repeat="person in people | filter: query | orderBy: 'age' ">{{person.name}} ({{person.age}}) {{person.address}}</li>
</ul>

<strong>１）ng-includeを使って外部ファイルのHTMLを埋め込み</strong>
<div class="well well-sm">この下に外部HTMLファイルの内容を埋め込み</div>
<ng-include src="'http://example.com/wp-content/themes/wp/template/include_table.html'"></ng-include>
<div class="well well-sm">この上に外部HTMLファイルの内容を埋め込み</div>

<strong>２）条件に応じて表示する外部HTMLを切り替え</strong>
　<br />
<form>
<input type="radio" ng-model="includeFile" value="list">リスト<input type="radio" ng-model="includeFile" value="table">表
</form>
<ng-include src="switchHtml()"></ng-include>

（include_list.html）
<ul>
  <li ng-repeat="person in people">{{person.name}} ({{person.age}}) {{person.address}}</li>
</ul>

（include_table.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>

<form>
<input type="radio" ng-model="switch" value="list">リスト<input type="radio" ng-model="switch" value="table">表<input type="radio" ng-model="switch" value="accordion">アコーディオン
</form>
<div ng-switch on="switch">
  <div ng-switch-when="table">
    <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>
  </div>
  <div ng-switch-when="list">
    <ul>
      <li ng-repeat="person in people">{{person.name}} ({{person.age}}) {{person.address}}</li>
    </ul>
  </div>
  <div ng-switch-when="accordion">
    <uib-accordion close-others=true>
      <div uib-accordion-group class="panel-default"
                               heading="{{person.name}}"
                               ng-repeat="person in people">
          <ul>
            <li>年齢：{{person.age}}</li>
            <li>住所：{{person.address}}</li>
          </ul>
      </div>
    </uib-accordion>
  </div>
  <div ng-switch-default>
    上のラジオボタンで選択したフォーマットでデータが表示されます。
  </div>
</div>

<strong>１）ng-ifを使って表示、非表示を切り替え</strong>
　
  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="detail" />詳細表示
    </label>
  </div>
  <ul>
    <li ng-repeat="person in people1">{{person.name}}
      <div ng-if="detail">
        <ul>
          <li>年齢：{{person.age}}</li>
          <li>住所：{{person.address}}</li>
        </ul>
      </div>
    </li>
  </ul>
<strong>２）ng-showを使って表示、非表示を切り替え</strong>
　
<style>
  .detail > *:first-child {font-weight: bold}
</style>
  <ul>
    <li ng-repeat="person in people1">{{person.name}}
      <ul class="detail">
        <li ng-show="person.age_v">年齢：{{person.age}}</li>
        <li ng-show="person.address_v">住所：{{person.address}}</li>
      </ul>
    </li>
  </ul>

１）ng-class、ng-styleを使ってCSSを設定
  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="danger" />ng-classでCSS設定
    </label>
  </div>
  <ul ng-class="{'bg-warning': danger}">
    <li ng-repeat="person in people">{{person.name}}
      <ul>
        <li ng-style="{color:'red'}">年齢：{{person.age}}</li>
        <li ng-class="danger ? ['bg-success','text-danger']:['bg-danger','text-success']">住所：{{person.address}}</li>
      </ul>
    </li>
  </ul>
　
２）ng-class-even、ng-class-oddを使ってng-repeatの表をストライピング
　
<style>
  tr.tbl-bg-clr-odd { background-color: lightpink; }
  tr.tbl-bg-clr-even { background-color: lightgreen;}
</style>
<table class="table">
  <thead>
    <tr><th>No.</th><th>名前</th><th>年齢</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in people" ng-class-even="tblBgClr.even" ng-class-odd="tblBgClr.odd">
      <td>{{$index + 1}}</td>
      <td>{{person.name}}</td>
      <td>{{person.age}}</td>
    </tr>
  </tbody>
</table>

  <p>ボタンにマウスを合わせる、離す、クリックすると色が変わります。</p>
  <button class="btn" ng-class="btnColor1"
          ng-click="btnColor1='btn-success'"
          ng-mouseenter="btnColor1='btn-primary'"
          ng-mouseleave="btnColor1='btn-defult'"
  >
    イベント処理１
  </button>
  <button class="btn" ng-class="btnColor2"
          ng-click="handleEvent($event)"
          ng-mouseenter="handleEvent($event)"
          ng-mouseleave="handleEvent($event)"
  >
    イベント処理２
  </button>

<input type="checkbox" ng-model="checkValue">有効、無効を切り替え
１）ng-disabled　ボタンの有効無効を切り替え
  <button class="btn btn-success" ng-disabled="checkValue">ボタン</button><br />
２）ng-checked　チェックボックスのチェックを切り替え
  <input type="checkbox" ng-checked="checkValue">最上部チェック有効<br />
３）ng-readonly　読込専用を切り替え
  <input type="text" ng-readonly="checkValue" value="最上部チェックで読込専用"/><br />
４）ng-selected　選択、未選択を切り替え
  <select>
    <option selected>選択肢１</option>
    <option>選択肢２</option>
    <option ng-selected="checkValue">最上部チェックで有効</option>
  </select>

<style>
  form.ng-invalid.ng-dirty { background-color: lightpink; }
  form.ng-valid.ng-dirty { background-color: lightgreen; }
  form { padding: 10px;}
</style>
<form name="appForm" novalidate>
  <div class="well">
    <div class="form-group" ng-class="{'has-error': appForm.name.$invalid && appForm.name.$dirty}">
      <label>会員番号（必須項目、半角英大文字or半角数字5～10文字）</label>
      <input type="text" name="name" class="form-control"
         ng-model="user.name" required
         ng-minlength="5" ng-maxlength="10"
         ng-pattern="/^[A-Z0-9]+$/" />
      <span class="text-danger" ng-show="appForm.name.$dirty && appForm.name.$error.required">必須項目: 会員番号を入力してください。</span>
      <span class="text-danger" ng-show="appForm.name.$dirty && appForm.name.$error.minlength">文字数: ５文字以上。</span>
      <span class="text-danger" ng-show="appForm.name.$dirty && appForm.name.$error.maxlength">文字数: 10文字以内。</span>
      <span class="text-danger" ng-show="appForm.name.$dirty && appForm.name.$error.pattern">文字種: 半角英大文字アルファベットと数字。</span>
    </div>

    <div class="form-group" ng-class="{'has-error': appForm.email.$invalid && appForm.email.$dirty}">
      <label>メールアドレス（必須項目、メールフォーマットチェック）</label>
      <input type="email" name="email" class="form-control"
        ng-model="user.email" required />
      <span class="text-danger" ng-show="appForm.email.$dirty && appForm.email.$error.required">必須項目: メールアドレスを入力しでください。</span>
      <span class="text-danger" ng-show="appForm.email.$dirty && appForm.email.$error.email">メールフォーマットエラー: 正しいメールアドレスフォーマットを入力してください。</span>
    </div>
    <div class="text-center">
      <button ng-disabled="appForm.$invalid" ng-click="save()" class="btn btn-primary">登録
      </button>
    </div>
  </div>
</form>
<div class="well" ng-show="master">
  <strong>入力内容</strong><br />
  {{master | json}}
</div>

１）オブジェクト全体を値として取得
　
<select ng-model="selectCity1" ng-options="city.name for city in citys">
  <option value="">市区町村を選択してください</option>
</select>

  選択した値: {{selectCity1}}

２）オブジェクト内の指定した属性を取得
<select ng-model="selectCity2" ng-options="city.id as city.name for city in citys">
  <option value="">市区町村を選択してください</option>
</select>

  選択した値: {{selectCity2}}

３）グループ化してオプションを表示
<select ng-model="selectCity3" ng-options="city.id as city.name group by city.pref for city in citys">
  <option value="">市区町村を選択してください</option>
</select>

  選択した値: {{selectCity3}}

１）$parent属性を使用する方法
　<br />
  <div class="radio" ng-repeat="item in prefs">
    <label>
      <input type="radio" ng-model="$parent.selectedPref"
           value="{{item.id}}">{{item.name}}
    </label>
  </div>
  選択した値: {{selectedPref}}<br />
２）ラジオボタンのng-change属性の使用例<br />
　<br />
  <div class="radio" ng-repeat="item in prefs">
    <label>
      <input type="radio" ng-model="data.selectedPref"
           value="{{item.id}}"
           ng-change="data.changePref($index)">{{item.name}}
    </label>
  </div>
  選択した値: {{data.selectedPref}}
  <ul>
    <li ng-repeat="item in data.pref">{{item}}</li>
  </ul>

１）降順のorderBy、limitToで表示個数、numberで小数点桁数
　
<table class="table">
  <thead>
    <tr><th>日時</th><th>国語</th><th>算数</th><th>理科</th><th>平均</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="myScore in myScores | orderBy: '-day' |limitTo:3">
      <td>{{myScore.day}}</td>
      <td>{{myScore.jpn}}</td>
      <td>{{myScore.math}}</td>
      <td>{{myScore.sci}}</td>
      <td>{{(myScore.jpn + myScore.math + myScore.sci)/3 | number:1}}</td>
    </tr>
  </tbody>
</table>
  

２）複数項目でorderBy、属性の値でfilter

　
フィルター：<input ng-model="query" type="text" placeholder="商品名で検索" autofocus>
<table class="table">
  <thead>
    <tr><th>商品名</th><th>分類</th><th>価格</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in products |filter:{chk: 'true',name: query} | orderBy:['grp','price']">
      <td>{{item.name}}</td>
      <td>{{item.grp}}</td>
      <td>{{item.price | number:0}}円</td>
    </tr>
  </tbody>
</table>

１）filterで関数を使用
　
<table class="table">
  <thead>
    <tr><th>日時</th><th>国語</th><th>算数</th><th>理科</th><th>合計</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="myScore in myScores | filter:selectPass">
      <td>{{myScore.day}}</td>
      <td>{{myScore.jpn}}</td>
      <td>{{myScore.math}}</td>
      <td>{{myScore.sci}}</td>
      <td>{{myScore.jpn + myScore.math + myScore.sci}}</td>
    </tr>
  </tbody>
</table>
  <br />
２）orderByで式を指定して、項目クリックでソート<br />
　
[ <a href="" ng-click="sortClm=''">初期状態に戻す</a> ]
<table class="table">
  <thead>
    <tr>
      <th><a href="" ng-click="sortClm = 'day'; reverse=!reverse">日時</a></th>
      <th><a href="" ng-click="sortClm = 'jpn'; reverse=!reverse">国語</a></th>
      <th><a href="" ng-click="sortClm = 'math'; reverse=!reverse">算数</a></th>
      <th><a href="" ng-click="sortClm = 'sci'; reverse=!reverse">理科</a></th>
      <th>合計</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="myScore in myScores | orderBy:sortClm:reverse">
      <td>{{myScore.day}}</td>
      <td>{{myScore.jpn}}</td>
      <td>{{myScore.math}}</td>
      <td>{{myScore.sci}}</td>
      <td>{{myScore.jpn + myScore.math + myScore.sci}}</td>
    </tr>
  </tbody>
</table>
  <br />
３）orderByで関数を使用<br />
　
<table class="table">
  <thead>
    <tr><th>商品名</th><th>価格</th><th>在庫数</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in products | orderBy:customOrder">
      <td>{{item.name}}</td>
      <td>{{item.price | number:0}}円</td>
      <td>{{item.stock}}</td>
    </tr>
  </tbody>
</table>

１）単一の属性値を変換するカスタムフィルター
　
<table class="table">
  <thead>
    <tr><th>予定</th><th>チェック</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in todos">
      <td>{{item.action}}</td>
      <td>{{item.chk | checkmark}}</td>
    </tr>
  </tbody>
</table>
  <br />
２）配列データをフィルタリングするカスタムフィルター<br />
　
<select ng-model="selectGrp" ng-options="item.grp as item.grp for item in products | distinct:'grp'">
  <option value="">商品分類を選択してください</option>
</select>
<table class="table">
  <thead>
    <tr><th>商品名</th><th>分類</th><th>価格</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in products |filter:{grp: selectGrp}">
      <td>{{item.name}}</td>
      <td>{{item.grp}}</td>
      <td>{{item.price | number:0}}円</td>
    </tr>
  </tbody>
</table>

ステップ１）配列データをオフセットと表示個数を指定して表示
　
<form class="form-inline">
  <input ng-model="i_offset" type="text" placeholder="オフセット">
  <input ng-model="i_size" type="text" placeholder="表示個数">
</form>
<table class="table table-striped">
  <thead>
    <tr>
      <th>№</th><th>名前</th><th>年齢</th><th>住所</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in friends | offset: i_offset | limitTo: i_size">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
      <td>{{item.address}}</td>
    </tr>
  </tbody>
</table>
  <br />
ステップ２）配列データをページングで表示<br />
　
<form class="form-inline">
  <div class="form-group">
    <label>１ページの件数:</label>
    <input ng-model="itemsPerPage" type="text">
  </div>
</form>
<table class="table table-striped">
  <thead>
    <tr>
      <th>№</th><th>名前</th><th>年齢</th><th>住所</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in friends | offset: (currentPage-1)*itemsPerPage | limitTo: itemsPerPage">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
      <td>{{item.address}}</td>
    </tr>
  </tbody>
  <tfoot>
    <td colspan="4">
      <ul class="pagination">
        <li>
          <a href="#" ng-click="prevPage()">≪ 前へ</a>
        </li>
        <li ng-repeat="n in range()" ng-click="setPage(n)">
          <a href="#">{{n}}</a>
        </li>
        <li>
          <a href="#" ng-click="nextPage()">次へ ≫</a>
        </li>
      </ul>
    </td>
  </tfoot>
</table>
  <br />
ステップ３）ページリンクのCSS設定<br />
　
<form class="form-inline">
  <div class="form-group">
    <label>１ページの件数:</label>
    <input ng-model="itemsPerPage" type="text">
  </div>
</form>
<table class="table table-striped">
  <thead>
    <tr>
      <th>№</th><th>名前</th><th>年齢</th><th>住所</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in friends | offset: (currentPage-1)*itemsPerPage | limitTo: itemsPerPage">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
      <td>{{item.address}}</td>
    </tr>
  </tbody>
  <tfoot>
    <td colspan="4">
      <ul class="pagination">
        <li ng-class="prevPageDisabled()">
          <a href="#" ng-click="prevPage()">≪ 前へ</a>
        </li>
        <li ng-repeat="n in range()"  ng-class="{active: n == currentPage}" ng-click="setPage(n)">
          <a href="#">{{n}}</a>
        </li>
        <li ng-class="nextPageDisabled()">
          <a href="#" ng-click="nextPage()">次へ ≫</a>
        </li>
      </ul>
    </td>
  </tfoot>
</table>

１）コントローラ内でフィルターを使用<br />
<br />
①filterFilterの書式を使用<br />
　
<table class="table">
  <thead>
    <tr><th>商品番号</th><th>商品名</th><th>価格</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in trueProducts">
      <td>{{item.no}}</td>
      <td>{{item.name}}</td>
      <td>{{item.price | number:0}}円</td>
    </tr>
  </tbody>
</table><br />
②$filterを使用<br />
　
<table class="table">
  <thead>
    <tr><th>商品番号</th><th>商品名</th><th>価格</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in pcProducts">
      <td>{{item.no}}</td>
      <td>{{item.name}}</td>
      <td>{{item.price | number:0}}円</td>
    </tr>
  </tbody>
</table>
  <br />
２）既存のフィルターを拡張<br />
　
<form class="form-inline">
  <input ng-model="i_offset" type="text" placeholder="オフセット">
  <input ng-model="i_size" type="text" placeholder="表示個数">
</form>
<table class="table table-striped">
  <thead>
    <tr>
      <tr><th>商品番号</th><th>商品名</th><th>価格</th></tr>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in products | range:i_offset:i_size">
      <td>{{item.no}}</td>
      <td>{{item.name}}</td>
      <td>{{item.price | number:0}}円</td>
    </tr>
  </tbody>
</table>