AngularJS 式: ARRAY、オブジェクト、$eval、文字列 [例]

Angular JS 式とは何ですか?

式は二重中括弧 {{ }} で定義された変数です。これらは Angular JS 内で非常によく使用され、以前のチュートリアルでも取り上げました。

Angular.js 式を例で説明する

AngularJS の式は、二重中括弧 {{expression}} 内に記述されます。

構文：

式の簡単な例は、{{5 + 6}} です。

Angular.JS 式は、ng-bind ディレクティブと同じ方法でデータを HTML にバインドするために使用されます。 AngularJS は、式が配置された場所に正確にデータを表示します。

Angular.JS 式の例を見てみましょう。

この例では、単純な数値の加算を式として表示します。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

    <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>

    <h1> Guru99 Global Event</h1>

    <div ng-app="">
        Addition : {{6+9}}
    </div>

</body>
</html>

コードの説明：

上のスクリーンショットに示すように、この例の ng-app ディレクティブは空白です。これは、コントローラーを割り当てるモジュールがないことを意味するだけです。ディレクティブ、コードに付属するサービス。
2 つの数値の加算を調べる簡単な式を追加します。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

出力から、

9つの数字6と15を加算し、加算された値XNUMXが表示されていることがわかります。

Angular.JS Numbers

式は数値を扱う場合にも使用できます。数値を使用した Angular.JS 式の例を見てみましょう。

この例では、margin と profit という 2 つの数値変数の単純な乗算を示し、乗算された値を表示します。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

    <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.6.9/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>

コードの説明：

ng-init ディレクティブは、ビュー自体の変数とそれに対応する値を定義するために angular.js で使用されます。これは、ローカル変数を定義してコーディングするのと似ています。プログラミング言語。この場合、マージンと利益という 2 つの変数を定義し、それらに値を割り当てます。
次に、2 つのローカル変数を使用して、それらの値を乗算します。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

出力から、

2 つの数値 2 と 200 の乗算が行われ、乗算された値 400 が表示されていることがはっきりとわかります。

AngularJS 文字列

式を使用して文字列を操作することもできます。文字列を使用した Angular JS 式の例を見てみましょう。

この例では、「firstName」と「lastName」の 2 つの文字列を定義し、それに応じて式を使用して表示します。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

    <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>

    <h1> Guru99 Global Event</h1>

    <div ng-app="" ng-init="firstName='Guru';lastName='99'">

        &nbsp;&nbsp;&nbsp;
        First Name : {{firstName}}<br>&nbsp;&nbsp;&nbsp;
        last Name : {{lastName}}

    </div>

</body>
</html>

コードの説明：

ng-init ディレクティブは、値「Guru」を持つ変数 firstName と値「99」を持つ変数 lastName を定義するために使用されます。
次に、{{firstName}} と {{lastName}} の式を使用してこれらの変数の値にアクセスし、それに応じてビューに表示します。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

出力から、firstName と lastName の値が画面に表示されていることが明確にわかります。

Angular.JS オブジェクト

式を使用して操作できます Javaスクリプトオブジェクトも同様に。

JavaScript オブジェクトを使用した Angular.JS 式の例を見てみましょう。 JavaScript オブジェクトは、名前と値のペアで構成されます。

以下は、JavaScript オブジェクトの構文の例です。

構文：

var car = {type:"Ford", model:"Explorer", color:"White"};

この例では、「firstName」と「lastName」の 2 つのキー値ペアを持つ XNUMX つのオブジェクトを person オブジェクトとして定義します。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}">

    &nbsp;&nbsp;&nbsp;
    First Name : {{person.firstName}}<br>&nbsp;&nbsp;&nbsp;
    Last Name : {{person.lastName}}

</div>

</body>
</html>

コードの説明：

ng-init ディレクティブは、オブジェクト person を定義するために使用されます。このオブジェクトには、値「Guru」を持つ firstName と値「99」を持つ変数 lastName のキーと値のペアがあります。
次に、{{person.firstName}} と {{person.firstName}} の式を使用してこれらの変数の値にアクセスし、それに応じてビューに表示します。実際のメンバー変数はオブジェクト person の一部であるため、実際の値にアクセスするにはドット (.) 表記を使用してアクセスする必要があります。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

出力から、

「firstName」と「secondName」の値が画面に表示されているのがはっきりとわかります。

AngularJS 配列

式を使用して配列を操作することもできます。配列を使用した Angular JS 式の例を見てみましょう。

この例では、3 つの科目の生徒の成績を保持する配列を定義します。ビューでは、これらのマークの値がそれに応じて表示されます。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="marks=[1,15,19]">

    Student Marks<br>&nbsp;&nbsp;&nbsp;
    Subject1 : {{marks[0] }}<br>&nbsp;&nbsp;&nbsp;
    Subject2 : {{marks[1] }}<br>&nbsp;&nbsp;&nbsp;
    Subject3 : {{marks[2] }}<br>&nbsp;&nbsp;&nbsp;
</div>

</body>
</html>

コードの説明：

ng-init ディレクティブは、3、1、15 の 19 つの値を持つ「marks」という名前の配列を定義するために使用されます。
次に、マーク [インデックス] の式を使用して、配列の各要素にアクセスします。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

出力から、配列で定義されているマークが表示されていることが明確にわかります。

AngularJS 式の機能と制限事項

Angular.JS 式の機能

角度のある表現は Javaスクリプト式。したがって、同じパワーと柔軟性を備えています。
In Javaスクリプトでは、未定義のプロパティを評価しようとすると、ReferenceError または TypeError が生成されます。Angular では、式の評価は寛容であり、undefined または null が生成されます。
式内でフィルターを使用して、データを表示する前にフォーマットすることができます。

Angular JS 式の制限事項

現在、Angular 式で条件、ループ、例外を使用することはできません。
ng-init ディレクティブ内であっても、Angular 式で関数を宣言することはできません。
Angular 式では正規表現を作成できません。正規表現は記号と文字の組み合わせであり、.*\.txt$ などの文字列を検索するために使用されます。このような式は、Angular JS 式内では使用できません。
また、Angular 式では or void を使用できません。

式と$evalの違い

$eval 関数を使用すると、コントローラー自体の内部から式を評価できます。したがって、ビューでの評価には式が使用されますが、コントローラー関数では $eval が使用されます。

これについて簡単な例を見てみましょう。

この例では、

$eval 関数を使用して 2 つの数値を追加し、それをスコープオブジェクトで使用してビューに表示できるようにします。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.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>

コードの説明：

まず、それぞれ値 2 を保持する 1 つの変数「a」と「b」を定義します。
$scope.$eval 関数を使用して 2 つの変数の加算を評価し、それをスコープ変数 'value' に割り当てます。
次に、変数「value」の値をビューに表示するだけです。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

上記の出力は、コントローラ上記の結果は、$eval 式を使用して 2 つのスコープ変数 'a と b' の加算を実行し、その結果が送信されてビューに表示されたことを示しています。

製品概要

での表現がどのように行われるかを見てきました。角度JS 定期的に評価するために使用できる Java単純な数字の加算などのスクリプトのような表現。
ng-init ディレクティブを使用すると、ビューで使用できる変数をインラインで定義できます。
式は、文字列や数値などのプリミティブ型で動作するように作成できます。
式は、次のような他の型でも使用できます。 Javaスクリプトオブジェクトと配列。
Angular JS の式には、正規表現を使用したり、関数、ループ、条件文を使用したりできないなど、いくつかの制限があります。

Angular JS 式とは何ですか?

Angular.js 式を例で説明する

Angular.JS Numbers

関連記事

AngularJS 文字列

Angular.JS オブジェクト

AngularJS 配列

AngularJS 式の機能と制限事項

式と$evalの違い

製品概要

ニュースレターに登録する