AngularJSでのDOM操作を色々試してみたのでメモ。
ng-bind
Modelの結果を表示します。
HTML
<input type="text" ng-model="name" placeholder="名前を入力"><br> <span ng-bind="name"></span>さんこんにちは
{{name}}を使って表示するのと動作は同じですが、{{name}}の場合はAngularJSが読み込まれるまでの間の一瞬表示されてしまうことがあるようです。
この回避方法としてng-cloakを使用する方法もあります。
ng-bindのデモページ
ng-bind-html
HTMLタグを含むModelの結果を表示します。
HTML
<input type="text" ng-model="name" placeholder="HTMLタグなどを入力"><br> <span ng-bind-html="name"></span>
JavaScript
angular.module('myModule', ['ngSanitize']);
ng-bindと違い、HTMLタグが含まれるとタグとして処理されます。
ng-bind-htmlのデモページ
ng-bind-template
ng-bind-template内のテンプレートを表示します。
HTML
<input type="text" ng-model="firstName" placeholder="first name"><br>
<input type="text" ng-model="lastName" placeholder="last name"><br>
<p ng-bind-template="{{firstName}} {{lastName}}"></p>
ng-bind-templateはng-bindと違い、複数の {{}} を含むことができます。
ng-bind-templateのデモページ
ng-non-bindable
テンプレートの表示をしたくない場合に使用します。
HTML
<input type="text" ng-model="name" placeholder="名前"><br>
<p>名前: {{name}}</p>
<p ng-non-bindable>名前: {{name}}</p>
ng-cloak
AngularJSが読み込まれるまでの間の一瞬{{}}が表示されるのを解消します。
HTML
<input type="text" ng-model="name" placeholder="名前"><br>
<p ng-cloak>名前: {{name}}</p>
ng-style
styleを設定します。
HTML
<button ng-click="color={color: '#ff0000'}">赤色</button>
<button ng-click="color={color: '#0000ff'}">青色</button>
<p ng-style="color">ここの文字色が変わります。</p>
ng-class
class名を設定します。
HTML
<p ng-class="'sample01'">サンプルテキスト1</p>
ng-show・ng-hide
ng-showは値の評価がtrueのとき表示、falseのとき非表示になります。
ng-hideは逆に値の評価がtrueのとき非表示、falseのとき表示になります。
HTML
<div ng-init="flag = true">
<button ng-click="flag = !flag">切り替え</button>
<div>現在のフラグ中身:{{flag}}</div>
<div>ng-show↓</div>
<div ng-show="flag">ng-showの切り替え中身</div><br>
<div>ng-hide↓</div>
<div ng-hide="flag">ng-hideの切り替え中身</div>
</div>
ng-open
表示・非表示の切り替えを行います。
HTML
<details ng-open="open"> <summary>スイッチ</summary> <ul> <li>JavaScript</li> <li>jQuery</li> <li>AngularJS</li> </ul> </details>
ng-if
値の評価がfalseのときはDOMから削除、trueのときはDOMに追加されます。
HTML
<div ng-init="flag = true"> <button ng-click="flag = !flag">切り替え</button> <p ng-if="flag">サンプルテキスト</p> </div>
ng-switch
switch文と同じように、ng-switchで評価式を定義、ng-switch-whenで各ケースの設定、ng-switch-defaultでデフォルトを設定します。
HTML
<div ng-init="flag"> <p>1 + 1 = 2 ？</p> <button ng-click="flag = 'yes'">はい</button> <button ng-click="flag = 'no'">いいえ</button> <div ng-switch="flag"> <div ng-switch-when="yes">正解</div> <div ng-switch-when="no">不正解</div> <div ng-switch-default>選択してください</div> </div> </div>
ng-repeat・ng-class-even・ng-class-odd
ng-repeatは繰り返し処理を行います。
ng-class-evenとng-class-oddはそれぞれ、繰り返し中の偶数時、奇数時にclassを設定します。
HTML
<div ng-init="arr = ['sample01', 'sample02', 'sample03', 'sample04', 'sample05', 'sample06', 'sample07']">
<ul>
<li ng-repeat="item in arr" ng-class-even="'even'" ng-class-odd="'odd'">{{item}}</li>
</ul>
</div>
ng-repeat・ng-class-even・ng-class-oddのデモページ
【参考サイト】
コメントが承認されるまで時間がかかります。