AngularJS 式: 配列、オブジェクト、$eval、文字列
ジェームズ・ハートマン
⚡ スマートサマリー
AngularJS 式は、二重中括弧で囲まれたコード断片で、データをテンプレートに直接バインドします。数値、文字列、オブジェクト、配列を評価し、コントローラー内から $eval 関数を使用することで同様の評価を実行できます。
AngularJSの式とは何ですか？
式とは、二重括弧の中に記述された変数のことです。 {{ }}これらはAngularJSで非常によく使われており、このシリーズの以前のチュートリアルでも頻繁に登場します。
⚠️ サポートに関するお知らせ： AngularJSが到達 2021年12月31日をもって販売終了となります。 今後パッチやセキュリティ修正は提供されません。以下の構文は既存のAngularJS 1.xアプリケーションの保守には有効ですが、新規プロジェクトでは最新のバージョンを使用する必要があります。 角度の補間括弧は依然として存在するが ng-init (NAIST) と $eval しない。
AngularJS式を例を用いて説明します
AngularJS の式は、次のように二重中括弧の中に記述します。 {{expression}}.
構文： 式の簡単な例は次のとおりです。 {{5 + 6}}.
AngularJSの式は、ng-bindディレクティブと同様の方法でデータをHTMLにバインドし、AngularJSは式が配置された場所に正確にデータを表示します。
この例では、単純な数の加算を式として示します。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <h1>Guru99 Global Event</h1> <div ng-app=""> Addition : {{6+9}} </div> </body> </html>
Code 説明：
- ng-app ディレクティブは空白です。これは、モジュールがコントローラーを提供していないことを意味します。 ディレクティブまたは、このページへのサービス。
- 簡単な式で2つの数を足し合わせる。
出力：
9と6の足し算が行われ、結果として15が表示されます。
AngularJS Numbers
式は数値を扱います。この例では、2 つの数値変数を乗算します。 margin (NAIST) と profitそして、製品を表示します。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <h1>Guru99 Global Event</h1> <div ng-app="" ng-init="margin=2;profit=200"> Total profit margin {{margin*profit}} </div> </body> </html>
Code 説明：
- ng-init ディレクティブは、ビュー自体の中で変数とその値を定義します。これは、他の言語のローカル変数とよく似ています。 プログラミング言語。 ここに
margin(NAIST) とprofit宣言され、割り当てられる。 - この式は、それら2つのローカル変数を乗算する。
出力：
2と200の乗算が行われ、積である400が表示されます。
AngularJS 文字列
式は文字列でも機能します。この例では、 firstName (NAIST) と lastName そして両方を表示します。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <h1>Guru99 Global Event</h1> <div ng-app="" ng-init="firstName='Guru';lastName='99'"> First Name : {{firstName}}<br> Last Name : {{lastName}} </div> </body> </html>
Code 説明：
- ng-init ディレクティブは、
firstName値「Guru"とlastName値は「99」です。 - 式
{{firstName}}(NAIST) と{{lastName}}それらの変数を読み込み、ビューに表示する。
出力：
両方の値が画面に表示されます。
AngularJSオブジェクト
式は Javaスクリプト オブジェクトは、名前と値のペアで構成されます。 Javaスクリプトオブジェクトは次のようになります。
var car = {type: "Ford", model: "Explorer", color: "White"};
この例では、 person 2つのキーと値のペアを保持するオブジェクト、 firstName (NAIST) と lastName.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <h1>Guru99 Global Event</h1> <div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}"> First Name : {{person.firstName}}<br> Last Name : {{person.lastName}} </div> </body> </html>
Code 説明：
- ng-init ディレクティブはオブジェクトを定義します
personキーと値のペアでfirstNameに設定 "Guru"とlastName「99」に設定されています。 - 式
{{person.firstName}}(NAIST) と{{person.lastName}}これらのメンバーを読み取ってください。これらはオブジェクトに属しているため、その値にアクセスするにはドット表記が必要です。
出力：
の値 firstName (NAIST) と lastName 画面に表示される。
AngularJS 配列
式は配列と連携して機能します。この例では、生徒の3つの科目の成績を格納する配列を定義し、それぞれの値を表示します。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <h1>Guru99 Global Event</h1> <div ng-app="" ng-init="marks=[1,15,19]"> Student Marks<br> Subject1 : {{marks[0]}}<br> Subject2 : {{marks[1]}}<br> Subject3 : {{marks[2]}} </div> </body> </html>
Code 説明：
- ng-init ディレクティブは配列を定義します
marks3つの値は1、15、19です。 - 形式の表現
marks[index]各要素を読んでください。
出力：
配列で定義されたマークが表示されます。
AngularJS 式の機能と制限事項
機能
- AngularJS の式は Javaスクリプト式と は、同じようなパワーと柔軟性を多く共有しています。
- 場所 Javaスクリプトが未定義のプロパティに対して ReferenceError または TypeError を発生させますが、AngularJS の評価は寛容で、undefined または null を返します。
- 式の中にフィルターを適用することで、データを表示する前にフォーマットを整えることができます。
- 三項演算子がサポートされているので、
{{ isReady ? 'Yes' : 'No' }}有効です。
製品制限
- AngularJS 式の中では、ループと例外処理は使用できません。条件ロジックは三項演算子に限定されます。
if明細書は入手できません。 - 関数は式の中で宣言することはできません。ng-init ディレクティブ内でも同様です。
- 正規表現は式の中に作成することはできません。正規表現は、次のような文字列を照合するために使用される記号と文字の組み合わせです。
.*\.txt$、そしてそのようなリテラルは拒否されます。 - コンマ演算子（
,）とvoidオペレーターは許可されていません。
ng-bindと式中括弧：どちらを使うべきか
Double 括弧とng-bindディレクティブはどちらも同じレンダリング結果を生成するため、どちらを選ぶかは恣意的に見えるかもしれません。しかし、そうではありません。AngularJSの読み込みが完了するまでの間、両者は異なる動作をし、その違いはページを使用するユーザーにも認識されます。
| 側面 | {{ expression }} | ng-bind |
|---|---|---|
| で書かれている | 要素の内容 | 要素属性 |
| AngularJSがロードされる前に | 生のブレースが画面に映る | 何も表示されない |
| 読みやすさ | 高い — 値はインラインです | 低い値 — 値は属性に隠されています |
| 要素ごとに複数の値 | はい | いいえ、綴じ方は1つだけです |
| 一度限りの製本 | はい、と {{::value}} |
はい、と ng-bind="::value" |
生の波括弧が一瞬表示される現象は、補間されていないコンテンツのフラッシュと呼ばれ、ブラウザがAngularJSによるコンパイル前にマークアップをレンダリングするために発生します。ファーストビューに表示されるコンテンツには、ng-bindを使用するか、ng-cloakディレクティブを追加してください。それ以外の場所、特に1つの要素内に複数の値が含まれる場合は、波括弧の方がより明確で読みやすい選択肢となります。
式と$evalの違い
その $eval 関数はコントローラ内部から式を評価します。式はビュー内で評価されますが、 $eval コントローラコード内で評価されます。
この例では、 $eval 2つの数値を加算し、その結果をスコープオブジェクトに格納して、ビューが表示できるようにする。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <div ng-app="sampleApp" ng-controller="AngularController"> <h1>Guru99 Global Event</h1> {{value}} </div> <script> var sampleApp = angular.module('sampleApp', []); sampleApp.controller('AngularController', function($scope) { $scope.a = 1; $scope.b = 1; $scope.value = $scope.$eval('a+b'); }); </script> </body> </html>
Code 説明：
- 2 つのスコープ変数、
a(NAIST) とbそれぞれが値1を保持します。 $scope.$evalそれらの加算を評価し、結果をスコープ変数に代入する。value.- すると、ビューに
value.
出力：
出力には、内部で評価された式が表示されます。 コントローラ2つのスコープ変数の合計がビューに送信され、ビューに表示されます。
