AngularJSは、 式を使用してHTMLにデータをバインドします。
AngularJS式
式は二重の中括弧内に記述することができますAngularJS: {{ expression }}
:式はまた、ディレクティブの内側に記述することができAngularJS ng-bind=" expression "
。
AngularJSは、式を解決し、式が書かれている正確に結果を返します。
AngularJS式は、JavaScript 式似ています:彼らはリテラル、演算子、変数を含めることができます。
例{{5 + 5}}または{{firstNameの+ "" + lastNameの}}
例
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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" value="{{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>
»それを自分で試してみてください JavaScriptの式対AngularJS式
JavaScript式と同様に、AngularJS式はリテラル、演算子、変数を含めることができます。
JavaScript式とは異なり、AngularJS式は、HTML内に記述することができます。
JavaScript式を行いながら、AngularJS式は、条件分岐、ループ、および例外をサポートしていません。
JavaScript式がいない間AngularJS式は、フィルタをサポートしています。