作成日

2015/07/20

最終更新

2021/09/07

記事区分

一般公開

DOM 操作ディレクティブ

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="angular.min.js"></script>
</head>
<body>

ここにサンプルコードを記述

</body>
</html>

ngBind

モデル (ng-model) をビューにバインドします。フォームに値を入力すると p タグに即時反映されます。

<input type="text" ng-model="myName">
<p ng-bind="myName"></p>

ngBindHtml

HTML 要素をビューにバインドします。エラーなく表示するためには ngSanitize を読み込んで XSS 対策をする必要があります。その際

<html lang="ja" ng-app>
↓
<html lang="ja" ng-app="myApp">

のように ng-app にモジュール名を指定する必要があることに注意します。

<!DOCTYPE html>
<html lang="ja" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="angular.min.js"></script>
  <script type="text/javascript" src="angular-sanitize.min.js"></script>
</head>
<body>

<input type="text" ng-model="myName">
<p ng-bind-html="myName"></p>

<script>
 angular.module('myApp', ['ngSanitize']);
</script>

</body>
</html>

angular-sanitize.min.js はこちらから辿ってダウンロードします。

ngBindTemplate

テンプレートをビューにバインドします。

<input type="text" ng-model="myName">
<p ng-bind-template="{{ myName }}"></p>

ngNonBindable

設定された DOM 要素にはバインドできなくなります。以下の例の二つ目の p タグ内には {{ myName }} がそのまま表示されます。

<input type="text" ng-model="myName">
<p>{{ myName }}</p>
<p ng-non-bindable>{{ myName }}</p>

ngCloak

AngularJS の初期化処理が完了するまで {{}} が一瞬だけ表示されてしまうことがあります。これを避けるためには ng-cloak を指定します。

<input type="text" ng-model="myName">
<p ng-cloak>{{ myName }}</p>

ngStyle

CSS スタイル属性を変更できます。

<p ng-style="myStyle">装飾されるテキスト</p>
<input type="button" value="set color" ng-click="myStyle={color:'red'}">
<input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}">
<input type="button" value="clear" ng-click="myStyle={}">

ngClass

CSS クラス属性を変更できます。

<style>
 .myclass1 { color: #f00; }
 .myclass2 { font-size: x-large; }
 .myclass3 { text-decoration: underline; }
</style>

<!-- 指定方法 1 -->
<p ng-class="'myclass1'">1</p>
<p ng-class="'myclass2'">2</p>
<p ng-class="'myclass3'">3</p>
<p ng-class="'myclass1 myclass2 myclass3'">1 2 3</p>

<!-- 指定方法 2 -->
<p ng-class="['myclass1']">1</p>
<p ng-class="['myclass2']">2</p>
<p ng-class="['myclass3']">3</p>
<p ng-class="['myclass1', 'myclass2', 'myclass3']">1 2 3</p>
<p ng-init="
   _myclass1='myclass1';
   _myclass2='myclass2';
   _myclass3='myclass3';
   ">モデルの用意</p>
<p ng-class="[_myclass1, _myclass2, _myclass3]">1 2 3</p>

<!-- 指定方法 3 -->
<p ng-class="{
   myclass1: true,
   myclass2: false,
   myclass3: true}">1 3</p>

ngIf

条件に合致しない場合は DOM ツリーから要素が完全に削除されます。

<div>
  <input type="checkbox" ng-model="myCheck">
  表示トグル
</div>

<p ng-if="myCheck">ngIf が真のときのみ表示</p>

ngSwitch

<input type="radio" ng-model="myModel" value="A">A
<input type="radio" ng-model="myModel" value="B">B
<input type="radio" ng-model="myModel" value="C">C

<div ng-switch="myModel">
  <div ng-switch-when="A">A</div>
  <div ng-switch-when="B">B</div>
  <div ng-switch-when="C">C</div>
  <div ng-switch-default>default</div>
</div>

ngRepeat

<ul ng-init="mylist=[1,2,3]">
  <li ng-repeat="item in mylist">{{ item }}</li>
</ul>

<ul ng-init="myhash={a:1,b:2,c:3}">
  <li ng-repeat="(key,val) in myhash">{{ key }} : {{ val }}</li>
</ul>

<ul ng-init="mylist=[1,2,3]">
  <li ng-repeat="item in mylist">
    {{ item }} (
    index: {{ $index }},
    index_even: {{ $even }},
    index_odd: {{ $odd }},
    first: {{ $first }},
    middle: {{ $middle }},
    last: {{ $last }}
    )
  </li>
</ul>

<ul ng-init="mylist=[1,2,3]">
  <li ng-repeat-start="item in mylist">{{ item }} start</li>
  <li ng-repeat-end>{{ item }} end</li>
</ul>

ngClassEven/ngClassOdd

ngRepeat でインデックス番号が偶数または奇数のときにだけ CSS class を適用するために使用します。

<style>
 .even { color: #f00; }
 .odd { color: #00f; }
</style>

<ul ng-init="mylist=[1,2,3]">
  <li ng-repeat="item in mylist" ng-class-even="'even'" ng-class-odd="'odd'">{{ item }}</li>
</ul>

ngShow/ngHide

<p ng-show="true">ngShow is true</p>
<p ng-show="false">ngShow is false</p>

<p ng-hide="true">ngHide is true</p>
<p ng-hide="false">ngHide is false</p>

AngularJS の適用範囲を限定する

AngularJS の適用範囲は ng-app で指定した要素以下の DOM ツリーに限定されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="angular.min.js"></script>
</head>
<body>

  <div ng-app>
    {{ 1+1 }}
  </div>
  <p>{{ 1+1 }}</p>

</body>
</html>

こもれびさん

デザインパターンを活用して美しいコードを書く方法を発信しています。開発の効率化が得意です。

フォロー

記事の執筆者にステッカーを贈る

有益な情報に対するお礼として、またはコメント欄における質問への返答に対するお礼として、記事の読者は、執筆者に有料のステッカーを贈ることができます。

>>さらに詳しくステッカーを贈る

Feedbacks

ログインするとコメントを投稿できます。

ログインする

AngularJS 公式ドキュメントの利用例
AngularJS はクライアントサイドの JavaScript フレームワークです。Angular は「角のある」という意味の英単語であり HTML のブラケットを表現しています。また随所で見られる ng というワードは発音が angular と似ているため採用されました。AngularJS の使用方法については様々な個人ブログにまとめられてはいますが、やはり公式ドキュメントが一番よくまとまって...
したくん10/10/2017に更新
0
- AngularJS
- JavaScript
ルーティングを定義してシンプルな SPA を構築 (AngularJS)
AngularJS は SPA (single page application) の構築をサポートしています。SPA を強制している訳ではないことに注意します。例えば SPA を構築する際に有用なモジュール ngRoute は外部モジュールとして提供されています。別途読み込みが必要です。サンプルコード index.html <!DOCTYPE html> <html lang...
カラフ10/27/2017に更新
0
- AngularJS
- JavaScript
フィルター (AngularJS)
AngularJS にはモデルの値を表示用に変換するフィルタという機能があります。コマンドラインにおけるパイプのように使用します。公式ドキュメントはこちらです。フィルターの使用例 <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <meta charset="utf-8"> <...
だいふくうさぎ9/7/2021に更新
0
- AngularJS
- JavaScript
HTTP 通信 (AngularJS)
AngularJS における HTTP 通信では、XMLHttpRequest オブジェクトが利用されています。AngularJS で HTTP 通信を行うためのサンプルコードを以下に示します。公式ページはこちらです。 index.html <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <...
ほんわかパンダ10/31/2017に更新
0
- AngularJS
- JavaScript
サービス (AngularJS)
AngularJS のビルトインサービスのうち代表的なものをコード例とともに列挙します。公式ドキュメントはこちらです。 <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <meta charset="utf-8"> <script src="angular.min.js">...
旅するエンジニア9/7/2021に更新
0
- AngularJS
- JavaScript