AngularJS の ng-click、ng-show、ng-hide ディレクティブ

替え： ジェームズ・ハートマン ジェームズ・ハートマン
Hours 更新中

⚡ スマートサマリー

AngularJSのイベント機能を使うと、Webアプリケーションはマウスのクリック、キー入力、ホバー操作などのユーザー入力に応答できます。ng-click、ng-show、ng-hideなどのディレクティブは、手動でDOMリスナーを設定するのではなく、マークアップ内で宣言的にその動作をバインドします。

  • 🖱️ クリック処理: ng-click は、式またはコントローラ関数を要素（最も一般的なのはボタン）にアタッチします。
  • 👁️ 条件付き表示: ng-show は、その式が真の場合に要素を表示し、ng-hide は、その式が真の場合に要素を削除します。
  • 🎨 メカニズム： どちらのディレクティブも、組み込みのng-hide CSSクラスを切り替えます。このクラスはdisplayをnoneに設定するため、要素はDOM内に残ります。
  • 🔗 スコープバインディング: $scope に配置されたメンバ変数によって表示状態が制御され、ハンドラ内でその変数を変更すると、ビューが即座に更新されます。
  • ???? 指令範囲: 18個のリスナー指示は、ぼかし、変更、フォーカス、キーボード、マウス、貼り付け、送信イベントをカバーしています。
  • ⚠️ サポート状況: AngularJSは2021年12月31日にサポートが終了したため、新規プロジェクトでは代わりに最新のAngularをターゲットにする必要があります。
プロフィール

AngularJS ng-click ng-show ng-hide ディレクティブ

AngularJS イベント

AngularJS イベント イベントとは、Webアプリケーションがマウスのクリック、キーボード入力、マウスオーバーなどのユーザー入力とやり取りできるようにする機能です。Webアプリケーションでは、特定のタスクやアクションを実行するためにイベントを処理する必要があり、各イベントはユーザーが対応するアクションを実行したときにトリガーされます。

ウェブアプリケーションを作成する際、遅かれ早かれ、マウスのクリックや移動、キーボードの押下、変更イベントなどのDOMイベントを処理する必要が出てきます。 AngularJS これらのイベントを宣言的に処理する指示を提供します。

例えば、ページ上のボタンがクリックされたときに何らかの処理を実行する必要がある場合、ng-clickイベントディレクティブはそのためのフックを提供します。

⚠️ サポートに関するお知らせ： AngularJSが到達 2021年12月31日をもって販売終了となります。 また、Angular チームからこれ以上のパッチやセキュリティ修正は提供されません。以下の指示は、既存の AngularJS 1.x アプリケーションを保守する際には引き続き有効ですが、新規開発には最新の AngularJS を使用してください。 角度のこれらの指示は、次のようなイベントバインディングに置き換えられます。 (click) とにより、 *ngIf.

AngularJS の ng-click ディレクティブとは何ですか?

その 「ng-click ディレクティブ」 AngularJSでは、HTML要素がクリックされたときにカスタム動作を適用します。これは、クリック応答を関連付ける最も一般的な場所であるボタンでよく使用され、クリック時にアラートを表示するためにも使用されます。

AngularJS の ng-click の構文

<element
 ng-click="expression">
</element>

AngularJS での ng-click の例

このng-clickの例では、ユーザーがボタンをクリックするたびにカウンター変数が増加します。

AngularJS の ng-click ディレクティブ

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body ng-app="">

<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 Global Event</h1>

<button ng-click="count = count + 1" ng-init="count=0">
    Increment
</button>

<div>The Current Count is {{count}}</div>

</body>
</html>

Code 説明：

  1. ng-init ディレクティブはローカル変数を設定します count 0へ。
  2. ボタンのng-clickディレクティブはインクリメントします count クリックするたびに1ずつ増えます。
  3. 補間 {{count}} ユーザーに現在の値を表示します。

出力：

AngularJS での ng-click

「インクリメント」ボタンが表示され、初期値はゼロです。下の画像に示すように、このボタンをクリックすると値が増加します。

AngularJS での ng-click

AngularJS の ng-show ディレクティブとは何ですか?

その ng-show ディレクティブ 指定されたものを表示または非表示にする HTML ng-show 属性に指定された式に基づいて要素を表示します。内部的には、要素は削除または追加することで表示または非表示になります。 .ng-hide CSSクラス、定義済みのクラスで、 display 〜へ none.

AngularJS の ng-show の構文

<element
 ng-show="expression">
</element>

AngularJS での ng-show の例

この例では、ng-show を使用して非表示の要素を表示しています。

AngularJS の ng-show ディレクティブ

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Show Angular" ng-click="ShowHide()"/>

    <br><br><div ng-show="IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp', []);

    app.controller('DemoController', function($scope) {
        $scope.IsVisible = false;

        $scope.ShowHide = function() {
            $scope.IsVisible = true;
        };
    });
</script>

</body>
</html>

Code 説明：

  1. ボタンのng-clickディレクティブは、 ShowHide コントローラで定義された関数 DemoController.
  2. ng-show属性は、「Angular」というテキストを含むdiv要素に付与されています。この要素の表示/非表示が制御されます。
  3. コントローラーでは、 IsVisible メンバー変数はスコープオブジェクトに配置され、初期化されます。 falseそのため、ページが最初に読み込まれたときに div は非表示になります。ng-show を使用すると、値は true 要素を表示し、 false 隠す。
  4. その ShowHide 関数セット IsVisible div要素が表示されるように、trueに設定します。

出力：

AngularJS の ng-show ディレクティブ

テキストを含むdivは、最初は表示されません。 IsVisible 最初はfalseです。クリック Angularを表示 それをtrueに設定すると、テキストが表示されるようになります。

AngularJS の ng-show ディレクティブ

お見逃しなく：

AngularJS の ng-hide ディレクティブとは何ですか?

その ng-hide ディレクティブ 式がTRUEと評価されたときに要素を非表示にし、式がFALSEと評価されたときに要素を表示します。これはng-showの正反対の動作です。内部的には同じ .ng-hide CSS クラス。

AngularJS の ng-hide の構文

<element
 ng-hide="expression">
</element>

AngularJS での ng-hide の例

この例はng-showの例を反映しているため、2つのディレクティブを直接比較できます。

AngularJS の ng-hide ディレクティブ

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Hide Angular" ng-click="ShowHide()"/>

    <br><br><div ng-hide="IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp', []);

    app.controller('DemoController', function($scope) {
        $scope.IsVisible = false;

        $scope.ShowHide = function() {
            $scope.IsVisible = true;
        };
    });
</script>

</body>
</html>

Code 説明：

  1. ボタンのng-clickディレクティブは、 ShowHide の機能 DemoController.
  2. その ng-非表示 属性は、テキスト「Angular」を含むdivに付加されます。
  3. IsVisible 初期化される falseこれはng-showではなくng-hideなので、falseの値はdivが 目に見える ページが最初に読み込まれたとき。
  4. その ShowHide 関数セット IsVisible true にすると、div が非表示になります。

出力：

AngularJS の ng-hide ディレクティブ

ng-hideにfalseが渡されるため、最初はdivが表示されます。 Angularを非表示にする 真と判定され、その単語は消える。

AngularJS の ng-hide ディレクティブ

ng-show vs ng-hide vs ng-if: 主な違い

3つのディレクティブによって、ユーザーが要素を表示するかどうかが制御され、どれを選択するかによって動作とレンダリングパフォーマンスの両方に影響します。最初の2つはCSSクラスの切り替えのみを行うため、要素は常にページ上に存在します。3つ目は要素自体を追加および削除します。

側面 NG-ショー ng-非表示 ng-if
要素が表示されるとき 表現は真実です 表現は偽です 表現は真実です
DOM内の要素 常に 常に 真である場合のみ
使用した方法 Toggles .ng-hide クラス Toggles .ng-hide クラス 要素を作成および破棄します
子どもの範囲 親スコープを共有する 親スコープを共有する 新しい子スコープを作成します
隠れているときの監視者 今も活動中 今も活動中 削除済み
ベスト ライトコンテンツの頻繁な切り替え 逆転した状況 過激な内容はめったに表示されません

要素の表示/非表示が頻繁に切り替わる場合は、ng-show または ng-hide を使用してください。これらの場合、要素は再構築されず、切り替えにかかるコストはクラス変更のみです。表示頻度の低い高負荷なセクションには ng-if を使用してください。要素を削除すると、その監視対象も削除され、サイクルごとのダイジェストコストが削減されます。

AngularJS イベント リスナー ディレクティブ

AngularJSイベントリスナーをHTML要素に追加するには、以下の1つ以上を使用できます。 ディレクティブ:

  • ng-ぼかし
  • NG-変更
  • ng-クリック
  • ng-コピー
  • NGカット
  • ng-dblclick
  • NGフォーカス
  • ng-キーダウン
  • ng-キープレス
  • ng-キーアップ
  • ng-マウスダウン
  • ng-マウスエンター
  • ng-mouseleave
  • ng-mousemove
  • ng-マウスオーバー
  • ng-マウスアップ
  • NGペースト
  • NG-送信

各ディレクティブは式を受け入れ、その内部では生のブラウザイベントが次のように利用できます。 $event ハンドラーが、押されたキーやクリック座標などの詳細情報を必要とする場合。

よくあるご質問

予約済みのものを通過する $event 変数、例えば ng-click="handle($event)"コントローラはネイティブイベントを受信し、ターゲット、座標を読み取ったり、preventDefaultを呼び出したりすることができます。

ng-repeat はアイテムごとに子スコープを作成するため、ハンドラー内でプリミティブを割り当てると、その子スコープのみが更新されます。親スコープのオブジェクトプロパティに書き込むか、 $parent変化を外部から目に見えるようにするため。

部分的には。 AI ツールはng-clickを変換します (click) そしてng-show *ngIf 信頼性は高いものの、AngularJS のスコープには Angular に直接対応する機能がないため、スコープに依存するロジックや双方向バインディングについては手動で確認する必要があります。

AIアシスタントは、ng-appの欠落、モジュール登録と一致しないコントローラー名、またはディレクティブ属性のタイプミスといった、よくある原因を迅速に特定します。提案された修正方法は、ブラウザでのテストが必要です。

いいえ。AngularJSにはng-show、ng-hide、ng-ifしかありません。ng-visibleディレクティブは存在せず、参照しても効果はありません。AngularJSは認識されない属性を無視するためです。

この投稿を要約すると次のようになります: