AngularJS式
AngularJSは、式を使用してデータをHTMLにバインドします。
AngularJS式
AngularJS式は、二重中括弧内に記述できます。{{ expression }}
AngularJS式は、ディレクティブ内に記述することもできます。ng-bind="expression"
AngularJSは式を解決し、式が書き込まれた場所に正確に結果を返します。
AngularJS式はJavaScript式によく似ています。リテラル、演算子、変数を含めることができます。
例{{5 + 5}}または{{firstName + "" + lastName}}
例
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
ng-appディレクティブ
を削除すると、HTMLは式を解決せずにそのまま表示します。
例
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 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>Total in dollar: {{ quantity * cost }}</p>
</div>
を使用した同じ例ng-bind：
例
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
使用ng-initはあまり一般的ではありません。コントローラに関する章で、データを初期化するためのより良い方法を学びます。
AngularJS文字列
AngularJS文字列はJavaScript文字列に似ています。
例
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
を使用した同じ例ng-bind：
例
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
AngularJSオブジェクト
AngularJSオブジェクトはJavaScriptオブジェクトのようなものです。
例
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
を使用した同じ例ng-bind：
例
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
AngularJSアレイ
AngularJS配列はJavaScript配列に似ています。
例
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
を使用した同じ例ng-bind：
例
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
AngularJS式とJavaScript式
JavaScript式と同様に、AngularJS式には、リテラル、演算子、および変数を含めることができます。
JavaScript式とは異なり、AngularJS式はHTML内に記述できます。
AngularJS式は条件、ループ、および例外をサポートしていませんが、JavaScript式はサポートしています。
AngularJS式はフィルターをサポートしますが、JavaScript式はサポートしません。
JavaScriptチュートリアルでJavaScriptについて学びます。