DOM 操作ディレクティブ (AngularJS)

[最終更新] (2019/06/03 00:46:46)

プログラミング/IoT の関連商品 (Amazonのアソシエイトとして、当メディアは適格販売により収入を得ています。)

サンハヤト SAD-101 ニューブレッドボード

キットで遊ぼう電子回路No.3ディジタル回路編Vol.1セット [ECB-300T]

スーパーマリオメーカー 2 -Switch

キットで遊ぼう電子回路NO.4ディジタル回路Vol.2セット [ECB-400T]

Nintendo Switch Lite イエロー

tybot

概要

AngularJS のビルトインディレクティブのうち DOM 操作に関するものを、コード例とともに列挙します。公式ドキュメントはこちらです。

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

この続きが気になる方は

DOM 操作ディレクティブ (AngularJS)

残り文字数は全体の約 36 %

tybot

100 円

* プログラミング情報の有料公開およびご購入について

* ご購入済みの方はこちらからログイン