ホームページ > ウェブフロントエンド > jsチュートリアル > AngularJS_AngularJS での式の使用法の詳細な説明

AngularJS_AngularJS での式の使用法の詳細な説明

WBOY
リリース: 2016-05-16 15:54:41
オリジナル
922 人が閲覧しました

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

<p>Expense on Books : {{cost * quantity}} Rs</p>

ログイン後にコピー

文字列

を使用します
<p>Hello {{student.firstname + " " + student.lastname}}!</p>

ログイン後にコピー

オブジェクトを使用

<p>Roll No: {{student.rollno}}</p>

ログイン後にコピー

配列を使用する

<p>Marks(Math): {{marks[3]}}</p>

ログイン後にコピー

次の例は、上記のすべての式を示しています。
testAngularJS.html ファイルのコードは次のとおりです:

<html>
<title>AngularJS Expressions</title>
<body>
<h1>Sample Application</h1>
<div ng-app="" ng-init="quantity=1;cost=30; student={firstname:'Mahesh',lastname:'Parashar',rollno:101};marks=[80,90,75,73,60]">
  <p>Hello {{student.firstname + " " + student.lastname}}!</p>  
  <p>Expense on Books : {{cost * quantity}} Rs</p>
  <p>Roll No: {{student.rollno}}</p>
  <p>Marks(Math): {{marks[3]}}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

ログイン後にコピー

出力

Web ブラウザで textAngularJS.html を開きます。結果は次のようになります:

2015616115757530.png (587×339)

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート