AngularJSのTemplateで使える機能について書籍などで確認してみました。
ngApp
ngAppを設定すると、自動でAngulerJSが実行されます。これは各htmlにつき、ひとつずづだけ設定してください。
ng-app="ApplicationModule"
ngBind
ngBindは指定してテキストを、設定したエレメントの値に置換します。htmlを指定した場合は、エレメントではなくテキストとなります。
<p ng-bind="hello.text"></p>
<div ng-bind="hello.html"></div>
<p>{{hello.text}}</p>
<div>{{hello.html}}</div>
ngBubdHtmlUnsafe
ngBindと同じく設定したエレメントの値を置換できます。ただしこの場合はhtmlはエレメントになります。
<div ng-bind-html-unsfe="hello.html"></div>
ngBindTempate
ngBindTemplateはAttributeに書かれたTemplateをエレメントとして展開します。
div ng-bind-template="{{name}} {{text}}"></div>
ngClass
ngClassは指定した変数の値「クラス名」を設定します。
<style>
p {
color: bule;
}
.red {
color: red;
}
</style><div ng-controller="HelloCtrl" ng-init="hello.class='red'"> <p ng-class="hello.class">Hello, world!!</p> </div>
ngCloak
ngCloakはアプリケーションがロードを完了するまで、設定したエレメントを非表示にします。Templateのコンパイルが終了したら、エレメントを表示します。また、この機能を使うには先にAnugularJSを読み込む必要があります。
<script src="angular.js"></script> <div ng-controller="HelloCtrl"> <p ng-cloak>Hello, world!!</p> </div>
ngDisabled
ngDisabledは指定した変数の真理値に応じてdisabled属性を切り替えます。trueで無効化、falseで有効化。
<div ng-init="hello.disabled=true"> <button ng-disabled="hello.disabled">Hello</button> </div>
ngForm
ngFormをつかうことで、formの入れ子が可能になります。valiation,requiredなどのformチェックもできます。
<form name="outerForm">
<div ng-form name="innerForm">
<input type="text" name="text" required>
<span ng-show="innerForm.text.$error.required">Required!!</span>
</div>
</form>
ngHide
ngHideは指定した変数の真理値に応じて表示を切り替えます。
<p ng-hide="hello.hidden">Hello, world</p>
ngShow
ngHideの反対版
<p ng-show="hello.show">Hello, world</p>
ngHref
指定したTemplateの遷移先を展開・設定します。
<a ng-href="{{hello.link}}">Hello, Link!!</a>
ngInclude
設定したsrc属性を取得・表示します。
<div ng-init="hello.src='hello.html'"> <div ng-include src="hello.html"></div> </div>
ngInit
Templateが各地を利用して表示される前に、初期化処理として実行されます。
<div ng-init="hello.text='wow!!'; hello.name='world'">
<p>{{hello.text}} {{hello.name}}</p>
</div>
ngList
配列を挿入するときに使います。
<input ng-list ng-model="names">{{names.length}}</input>
ngMultiple
select要素にmultile属性を付与します。
<select ng-multiple="hello.multiple"> <option>hello</option> <option>hello</option> <option>hello</option> </select>
ngNonBindable
htmlをそのまま返します。
<div ng-non-bindable>{{ 1 + 2}}</div>
ngPluraize
countに合わせて表示を切り替えできます。
Player 1:<input type="text" ng-model="player1" value="Yoshida"><br>
Player 2:<input type="text" ng-model="player2" value="Yamada"><br>
Number of Players:<input type="text" ng-model="playerCount" value="1">
<ng pluralize count="playerCount" when="{'0': 'Nobody.',
'one': '1 player.',
'other': '{} players.'}">
</ng-pluralize><br>
ngReadonly
readOnlyを切り替えます
<input type="text" ng-readonly="hello.read" value="hello, word">
ngRepeat
配列の変数を反復処理して展開できます
<ul>
<li ng-repeat="person in people" ng-class="{first:$first, middle:$middle, last:$last}">Player {{$index+1}} - {{person.name}} {{person.age}} years</li>
</ul>以下の変数が利用できるようになります。
$index $first $middle $last
ngClassEven
ngRepeat中の偶数行に指定したclassを設定します。
ngClassOdd
ngRepeat中の奇数行に指定したclassを設定します。
ngSelected
select要素内のoption要素に設定すると、指定した変数がtrueの場合に設定したoption要素が選択状態になります。
<select ng-init="selected=true"> <option>Hello</option> <option ng-selected="selected">Hello</option> <option>Hello</option> </select>
ngSrc
srcと違い{{}}の部分をきちんと変換してくれる
<div>
<img src="{{imgSrc}}" />
<img ng-src="{{imgSrc}}" />
</div>
ngStyle
オブジェクトのkeyをstyle名、valueをstyleとしてエレメントに対してスタイルを設定します。
<div ng-init="colorstyle={color: 'green'}">
<p ng-style="colorstyle">Hello world!!</p>
</div>
ngSubmit
formに設定すると、設定した関数を呼ぶことができます。action属性がある場合はそちらが優先されます。
<form ng-submit="submit()">
<input type="text" name="text" ng-model="text">
<input type="submit" value="submit">
<p>Hello {{word}}</p>
</form>var app = angular.module("Hello", []);
app.controller("HelloCtrl", function($scope){
$scope.submit=function() {
$scope.word = this.text;
};
})
ngSwitch
DOMの表示/非表示を切り替えます。値がない場合は、ng-switch-defaultが表示されます。
<div ng-init="items={'hello', 'world', 'other'}; selection=items[0]">
<select ng-model="selection" ng-options="item for item in items">
</select>
<div ng-switch on="selection">
<div ng-switch-when="hello">Hello Div</div>
<span ng-switch-when="world">World Soan</span>
<p ng-switch-default>Hello world Default</p>
</div>
</div>
ng-options
selectエレメントで設定することにより、optionエレメントが展開されます。optionにはArrayとObjectを指定できます。
