AngularJS 入門チュートリアル - AngularJSexpression_AngularJS

式は、アプリケーション データを HTML にバインドするために使用されます。式は、{{expression}} のように二重括弧で囲みます。式内の動作は ng-bind ディレクティブと同じです。 AngularJS アプリケーション式は純粋な JavaScript 式であり、そこで使用されるデータを出力します。

AngularJS 式の形式: {{expression }}

AngularJS 式には文字列、数値、演算子、変数を使用できます

数値演算 {{1 + 5}}

文字列の連結 {{ 'abc' + 'bcd' }}

変数演算 {{ firstName + " " + lastName }}、{{ 数量 * コスト }}

オブジェクト {{ person.lastName }}

配列{{ ポイント[2] }}

AngularJS の例

1.Angularjs の数値

<div ng-app="" ng-init="quantity=2;cost=5">
<p>总价： {{ quantity * cost }}</p>
</div> 

上記の例の出力:

合計価格: 10

コードのコメント:

ng-init="quantity=2;cost=5" //JavaScript の varquantity=2,cost=5;
と同等 同じ機能は ng-bind

を使用して実現できます。

<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价： <span ng-bind="quantity * cost"></span></p>
//这里的ng-bind相当于指定了span的innerHTML
</div> 

2.Angularjs 文字列

<div ng-app="" ng-init="firstName='John';lastName='Snow'">
<p>姓名： {{ firstName + " " + lastName }}</p>
</div> 

出力

名前: ジョーン・スノウ

3. AngularJS オブジェクト

<div ng-app="" ng-init="person={firstName:'John',lastName:'Snow'}">
<p>姓为 {{ person.lastName }}</p>
</div> 

出力

姓はスノーです

4.AngularJS 配列

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>

出力

3 番目の値は 19

以上は編集者が紹介するAngularJS入門チュートリアルのAngularJS式の紹介です、皆さんのお役に立てれば幸いです。