AngularJS 表現
- 前のページ AngularJS 介绍
- 次のページ AngularJS モジュール
AngularJSは表达式データをHTMLにバインドします。
AngularJS 表現
AngularJSの表达式は、二重大括号内に書ける：{{ expression }}。
AngularJSの表达式は、指令内にも書ける：ng-bind="expression"。
AngularJSは表达式を解析し、表达式を書いた場所に結果を返します。
AngularJS 表現とても似ています JavaScriptの表达式：それらは文字列、演算子、変数を含むことができます。
例えば {{ 5 + 5 }} または {{ firstName + " " + lastName }}
例
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>私の最初の表达式：{{ 5 + 5 }}</p>
</div>
</body>
</html>
削除すると ng-app 指令は、HTMLが表达式をそのまま表示し、解析しません：
例
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div>
<p>私の最初の表达式：{{ 5 + 5 }}</p>
</div>
</body>
</html>
好きな場所で表达式を書ける。AngularJSはそれを簡単に解析し、結果を返します。
例：AngularJSでCSS属性の値を変更する。
値を変更することで以下の入力ボックスの色を変えます：
浅い青色例
<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol">
</div>
AngularJSの数字
AngularJSの数字はJavaScriptの数字のように：
例
<div ng-app="" ng-init="quantity=1;cost=5">
<p>合計金額（ドル）：{{ quantity * cost }}</p>
</div>
使用 ng-bind の同じ例：
例
<div ng-app="" ng-init="quantity=1;cost=5"> <p>合計金額（ドル）：<span ng-bind="quantity * cost"></span></p> </div>
ng-initを使用することはよくありません。コントローラーの章でより良いデータ初期化方法を学びます。
AngularJSの文字列
AngularJSの文字列はJavaScriptの文字列のように：
例
<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>名前は {{ firstName + " " + lastName }}</p>
</div>
使用 ng-bind 的相同例：
例
<div ng-app="" ng-init="firstName='Bill';lastName='Gates'"> <p>名前は <span ng-bind="firstName + ' ' + lastName"></span></p> </div>
AngularJSのオブジェクト
AngularJSのオブジェクトはJavaScriptのオブジェクトのように：
例
<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>名前は {{ person.lastName }}</p>
</div>
使用 ng-bind 的相同例：
例
<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>名前は <span ng-bind="person.lastName"></span></p>
</div>
AngularJSの配列
AngularJSの配列はJavaScriptの配列のように：
例
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第3結果は {{ points[2] }}</p>
</div>
使用 ng-bind 的相同例：
例
<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第3の結果は<span ng-bind="points[2]"></span></p> </div>
AngularJSの表現とJavaScriptの表現
AngularJSの表現は、文字列リテラル、演算子、および変数を含むことができますが、JavaScriptの表現と似ています。
JavaScriptの表現とは異なり、AngularJSの表現はHTML内に書けることができます。
AngularJSの表現は条件文、ループ、および例外をサポートしませんが、JavaScriptの表現はサポートします。
AngularJSの表現はフィルタをサポートしますが、JavaScriptの表現はサポートしません。
JavaScriptの情報について、JavaScriptトレーニングで詳しく説明しています。
- 前のページ AngularJS 介绍
- 次のページ AngularJS モジュール
