AngularJSの表現基礎学習メモ_AngularJS-jsチュートリアル-php.cn

AngularJSの表現基礎学習メモ_AngularJS

WBOY

リリース： 2016-05-16 15:59:56

オリジナル

1126 人が閲覧しました

AngularJS は式を介してデータを HTML にバインドします。

AngularJS 式

AngularJS 式は、{{ 式ステートメント }} のように二重中括弧で記述します。

AngularJS 式は、ng-bind ディレクティブと同じ方法でデータを HTML にバインドします。

AngularJS は計算結果として式を正確に「出力」します。

AngularJS 式には JavaScript 式と多くの類似点があり、どちらにもリテラル、演算子、変数が含まれます。例: {{ 5 5 }} および {{ firstName " " lastName }}

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
   <p>My first expression: {{ 5 + 5 }}</p>
</div>

ログイン後にコピー

ng-app ディレクティブを削除すると、式は評価されずにページに直接表示されます。

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div>
   <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

ログイン後にコピー

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 文字列

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 式は条件ステートメントとループステートメントをサポートしておらず、例外ステートメントもありません。
AngularJS 式はフィルターをサポートしています。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。