AngularJS入門チュートリアル：AngularJS式

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

Angularjs式形式：{{expression}}

AngularJS式は、文字列、数字、演算子、および変数です

番号操作{{1 + 5}}

文字列concatenation {{'abc' + 'bcd'}}

変数操作{{firstName + "" + lastName}}、{{数量 *コスト}}}

object {{person.lastname}}

array {{points [2]}}

AngularJSの例

1.Angularjs番号

<div ng-app = "" ng-init = "数量= 2; cost = 5"> <p>合計価格：{{数量 * cost}} </p> </div>

上記の例出力：

合計価格：10

コードコメント：

ng-init = "数量= 2; cost = 5" // var数量= 2に相当、javascriptでコスト= 5;

Ng-Bindを使用して同じ関数を実現できます

<div ng-app = "" ng-init = "数量= 1; cost = 5"> <p>合計価格：<span ng-bind = "数量 * cost"> </span> </p> //ここでのng-bindは、指定されたスパンの内側htmlに相当します</div>

2。Angularjs文字列

<div ng-app = "" ng-init = "firstname = 'john'; lastname = 'snow'"> <p> name：{{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 = "ポイント= [1,15,19,2,40]"> <p> 3番目の値は{{points [2]}} </p> </div>です

出力

3番目の値は19です

上記は、編集者が紹介したAngularjs入門チュートリアルのAngularJS式の紹介です。それがあなたに役立つことを願っています！