読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

AngularJSのTemplateで使える機能

Angular

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を指定できます。