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 でデータファイルの場所を変更する方法

推薦する

レスポンシブレイアウトについて知っておくべきこと

1. はじめにレスポンシブ Web デザインにより、Web サイトは複数のデバイスと複数の画面に同時...

Windows Server 2008 R2 サーバーが理由もなく自動的に再起動する問題の解決策

Windows Server 2008 サーバーが自動的に再起動します。サーバーにログインした後、ど...

Linux で ping は成功するがポートが利用できない問題を解決する方法

ping は成功したがポートにアクセスできない場合のポート可用性検出の説明ポート可用性検出ツールの紹...

Windows で mysql 8.0.12 をインストールするための詳細なチュートリアル

この記事では、MySQL 8.0.12のインストール方法に関する詳細なチュートリアルを参考までに紹介...

Dockerはnextcloudを使用してプライベートBaiduクラウドディスクを構築します

突然、ドキュメントの保存と共同作業のためのプライベート サービスを構築する必要がありました。多くの場...

antd ツリーと親子コンポーネント間の値転送問題について (React のまとめ)

プロジェクト要件: 製品ツリー ノードをクリックすると、そのノードのすべての親ノードが取得され、表に...

Webフロントエンドツール、Sublime Text 2の紹介

Sublime Text 2 は、軽量でシンプル、効率的なクロスプラットフォーム エディターです。ブ...

Centos8 (最小インストール) Python3.8+pip のインストール方法に関するチュートリアル

Python8のインストールを最小化した後、Python3.8.1をインストールしました。オンライン...

MySQL の基本クイックスタート知識のまとめ (マインドマップ付き)

目次序文1. データベースの基礎知識1. データベースとは何ですか? 2. データベースの分類3. ...

Ubuntu LinuxにOracle Java 14をインストールする方法

最近、Oracle は Java 14 (または Oracle JDK 14) の一般公開を発表しま...

開発者がデータベースロックを詳細に理解する必要がある理由

1.ロックしますか? 1.1 ロックとは何ですか?ロックの本当の意味は、鍵またはコードで開くことがで...

MySQL のロック待機とデッドロック問題の分析

目次序文: 1. ロック待機とデッドロックを理解する2. 現象の再発と治療要約:序文: MySQL ...

複雑なウェブサイトのナビゲーションを簡素化

<br />ナビゲーション設計は構造設計における主要なタスクの 1 つです。ソフトウェア...

丸い角や鋭い角の代わりに文字を使用することに関する研究経験の共有

1. フォントと文字表示の関係左側と右側の鋭角部分は Songti フォントで表示されます: &l...

Vue でスクロールバーのスタイルを変更する方法

目次まず、スクロール バーのスタイルを変更するには、疑似要素-webkit-scrollbarを使用...