AngularJSにおける括弧の役割の詳細な説明

AngularJSにおける括弧の役割の詳細な説明

1. 括弧の役割

1.1 角括弧 [ ]

属性名が角括弧で囲まれている場合、右側には式の値が割り当てられます <br /> 属性に角括弧がない場合、右側には文字列が割り当てられます

<div class="red">red</div> //ここでのクラス名は red です
<div [class]="red">red</div> //ここでのクラス名はblueです。つまり、角括弧の右側は式です。 //コンポーネントredでは: string = "blue";

1.2 括弧()

括弧はイベントバインディングに使用され、要素上でイベントをトリガーし、バインドされたメソッドが応答します。

<div (click)="go()">gogo</div> //括弧内にイベントを入れる //コンポーネントクラス go() {
 //表現...
}

1.3 中括弧 { { }}

中括弧{ {expression}}このメソッドは補間と呼ばれ、テンプレートに配置することができます

<div>{{good}}</div> //<div>こんにちは</div> 
 
//コンポーネントクラス good: string = "Hello";

1.4 文字列変数${ }

tes: 文字列 = "ワールド";
テスト: 文字列 = `Hello ${goo}`; //テスト: 文字列 = "Hello World";

1.5 [()]

双方向バインディング操作によく使用されます

<input [(ngModel)]='test_input' /> // 値= 'testNgClick'
 
//コンポーネント内 test_input: any = 'testNgClick';

AngularJS における括弧の役割に関するこの記事はこれで終わりです。AngularJS における括弧の役割についてさらに詳しく知りたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Angular のパフォーマンス最適化: サードパーティ コンポーネントと遅延読み込みテクノロジー
  • Angularフレームワークのビュー抽象定義の詳細な説明
  • Angular SMS テンプレート検証コード
  • Angularにng-zorroを導入する際の問題に関する簡単な分析
  • Angular+IonicはqueryParamsを使用してページジャンプ値の転送を実装します
  • Angularでシンプルなユニットテストを実装する例
  • AngularJs の $http は POST リクエストを送信しますが、PHP は Post データを受信できません。問題と解決策
  • 折りたたみと展開の効果を実現するための Angular+ionic のサンプルコード
  • Angular の 12 の典型的な問題について簡単に説明します

<<:  yum を使用して rpm と関連する依存関係をダウンロードして、docker をオフラインでインストールします。

>>:  CentOS6.7 mysql5.6.33 でデータファイルの場所を変更する方法

推薦する

Tomcat プロセスの CPU 使用率が高い場合のトラブルシューティング記録を記録する

この記事では主にTomcatプロセスを記録し、TCP接続が多すぎることによるCPU使用率の過剰のトラ...

Portainer を使用して Docker のビジュアル インターフェースを構築する方法

ポーテナーの紹介Portainer は、ステータス表示パネル、アプリケーション テンプレートの迅速な...

Navicat for MySQLのスケジュールされたデータベースバックアップとデータ復旧の詳細

データベースの変更または削除操作によってデータ エラーが発生したり、データベースがクラッシュしたりす...

CSS3は赤い封筒を振る効果を実現します

赤い封筒の揺れ効果を実現するには要件があります。これまでやったことがないので、記録しておきます。ヘヘ...

ベースリンクタグの使用の紹介ベース

<br />リンクをクリックすると、ポップアップ表示される Web ページ アドレスは ...

Ubuntuにmysql5.7.10を手動でインストールする

このチュートリアルでは、UbuntuにMySQL 5.7.10を手動でインストールする手順を参考まで...

CSS を使用して固定左列と適応右列の 2 列レイアウトを実現する 4 つの方法

1. フロート+オーバーフロー:非表示このメソッドは主にオーバーフローを通じて BFC をトリガーし...

WeChatミニプログラムでトークンの有効期限を処理する方法

目次まず結論から質問解決Promiseを使用してコールバック関数をカプセル化する要約するまず結論から...

MySQL の永続性とロールバックの原理を 1 つの記事で理解する

目次再実行ログディスクデータを直接更新するのではなく、最初にメモリデータを更新する必要があるのはなぜ...

CSSはラジオをクリックして2つの画像スタイルを切り替えますが、複数のラジオのうち1つだけをチェックできます。

クリックされたボタンには赤い画像スタイルを実装し、選択されていない他のボタンには灰色の画像スタイルを...

ウェブサイトのホームページを作成するための基本原則

1. ウェブサイトのホームページのハイパーテキスト ドキュメントの構成構造は、ユーザーの注意をできる...

dl、dt、dd リスト ラベルの例

dd タグと dt タグはリストに使用されます。通常は <ul><li> タ...

Vueのprops設定の詳細な説明

<テンプレート> <div class="demo">...

DockerコンテナにRedisをデプロイする手順の紹介

目次1 つの Redis 設定ファイル2 Dockerコマンドの開始3 docker-compose...