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

AngularJS イベント

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

Web ベースのアプリケーションを作成する場合、遅かれ早かれ、マウスのクリック、移動、キーボードの押下、変更イベントなどの DOM イベントをアプリケーションで処理する必要が生じます。

AngularJS このようなイベントを処理するために使用できる機能を追加できます。

たとえば、ページ上にボタンがあり、ボタンがクリックされたときに何かを処理したい場合は、Angular ng-click イベントディレクティブを使用できます。

このコースでは、イベントディレクティブについて詳しく説明します。

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

この 「ng-click ディレクティブ」 AngularJS のは、HTML 内の要素がクリックされたときにカスタム動作を適用するために使用されます。このディレクティブは、ユーザーが実行したクリックに応答するイベントを追加するのに最も一般的なため、通常はボタンに使用されます。ボタンをクリックしたときにアラートをポップアップするためにも使用されます。

AngularJS の ng-click の構文

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

クリックイベントを実装する方法の簡単な例を見てみましょう。

AngularJS での ng-click の例

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

AngularJS の ng-click ディレクティブ — AngularJS でのクリック禁止の例

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

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

コードの説明：

まず、ng-init ディレクティブを使用して、ローカル変数 count の値を 0 に設定します。
次に、ボタンに ng-click イベントディレクティブを導入します。このディレクティブでは、count 変数の値を 1 ずつ増やすコードを記述しています。
ここでは、count 変数の値をユーザーに表示しています。

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

出力：

上記の出力から、

「Increment」ボタンが表示され、count変数の値が最初はゼロになっていることがわかります。
[増分] ボタンをクリックすると、以下の出力画像に示すように、カウントの値がそれに応じて増分されます。

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

この ng-Show ディレクティブ AngularJS では、特定の特定の項目を表示または非表示にするために使用されます。 HTML ng-show 属性に指定された式に基づく要素。バックグラウンドでは、HTML 要素は、要素に .ng-hide CSS クラスを削除または追加することによって表示または非表示になります。これは、表示をなしに設定する事前定義された CSS クラスです。

AngularJS の ng-show の構文

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

バックグラウンドでは、要素に .ng-hide CSS クラスを削除または追加することによって、要素が表示または非表示になります。

AngularJS での ng-show の例

「ngshow event」ディレクティブを使用して非表示の要素を表示する方法を示す、Angular の ng-show の例を見てみましょう。

AngularJS の ng-show ディレクティブ — Angular での ng show の例

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.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>

コードの説明：

ng-click イベントディレクティブをボタン要素にアタッチします。ここでは、コントローラー DemoController で定義されている「ShowHide」という関数を参照しています。
Angular というテキストを含む div タグに ng-show 属性を付加しています。これは、ng-show 属性に基づいて表示/非表示を行うタグです。
コントローラーでは、スコープオブジェクトに「IsVisible」メンバー変数をアタッチしています。この属性は、div コントロールの可視性を制御するために、ng-show Angular 属性 (ステップ #2) に渡されます。最初はこれを false に設定して、ページが最初に表示されたときに div タグが非表示になるようにします。 注： - 属性 ng-show が true に設定されている場合、後続のコントロール (この場合は div タグ) がユーザーに表示されます。 ng-show 属性が false に設定されている場合、コントロールはユーザーに対して非表示になります。
IsVisible メンバー変数を true に設定するコードを ShowHide 関数に追加して、クリックタグ上の AngularJS 表示非表示 div をユーザーに表示できるようにします。

AngularJS の ng-show および ng-hide のコードが正常に実行されると、ブラウザーでコードを実行すると次の出力が表示されます。

出力：1

出力から、

最初は、テキスト「AngularJS」を含む div タグが表示されていないことがわかります。これは、isVisible スコープオブジェクトが最初に false に設定され、その後 div タグの ng-show ディレクティブに渡されるためです。
「Show AngularJS」ボタンをクリックすると、isVisible メンバー変数が true に変更され、「Angular」というテキストがユーザーに表示されるようになります。以下の出力がユーザーに表示されます。

出力には、Angular テキストを含む div タグが表示されます。

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

この ng-hide ディレクティブ AngularJS のは、式が TRUE の場合に要素を非表示にする関数です。式が FALSE の場合、要素が表示されます。バックグラウンドでは、要素に .ng-hide CSS クラスを削除または追加することによって、要素が表示または非表示になります。

AngularJS の ng-hide の構文

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

一方、ng-hide では、式が true の場合は要素が非表示になり、false の場合は表示されます。

AngularJS での ng-hide の例

ng-hide 属性と ng-show 属性がどのように使用できるかを示すために、ngShow で示したものと同様の ng-hide の例を見てみましょう。

AngularJS の ng-hide ディレクティブ — AngularJS での ng-hide の例

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.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 = $scope.IsVisible = true;
        }
        });
</script>

</body>
</html>

コードの説明：

ng-click イベントディレクティブをボタン要素にアタッチします。ここでは、コントローラー DemoController で定義されている ShowHide という関数を参照しています。
ng-hide 属性を、Angular というテキストを含む div タグに付加しています。これは、ng-show 属性に基づいて Angular で非表示を表示するために使用するタグです。
コントローラーでは、スコープオブジェクトに isVisible メンバー変数を添付しています。この属性は、div コントロールの可視性を制御するために ng-show 角度属性に渡されます。最初はこれを false に設定して、ページが最初に表示されたときに div タグが非表示になるようにします。
div タグをユーザーに表示できるように、IsVisible メンバー変数を true に設定するコードを ShowHide 関数に追加します。

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

出力：

出力から、

false のプロパティ値が ng-hide ディレクティブに送信されるため、テキスト「AngularJs」を含む div タグが最初に表示されることがわかります。
「Hide Angular」ボタンをクリックすると、true のプロパティ値が ng-hide ディレクティブに送信されます。したがって、以下の出力が表示され、「Angular」という単語が非表示になります。

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

これらの XNUMX つ以上を使用して、AngularJS イベントリスナーを HTML 要素に追加できます。ディレクティブ:

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

まとめ

イベントディレクティブは、ボタンのクリック、キーボードやマウスのクリックなどのユーザー介入によって生成されたイベントに応答するカスタムコードを追加するために Angular で使用されます。
最も一般的なイベントディレクティブは、クリックイベントの処理に使用される AngularJS ng-click ディレクティブです。これの最も一般的な用途は、ボタンのクリックに応答するコードを追加できる AngluarJS ボタンのクリックです。
HTML 要素は、 AngularJS ng-show ディレクティブ、Angular ng-hide ディレクティブと ng-visible 属性。

よろしければ：

AngularJS イベント

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

AngularJS の ng-click の構文

AngularJS での ng-click の例

関連記事

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

AngularJS の ng-show の構文

AngularJS での ng-show の例

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

AngularJS の ng-hide の構文

AngularJS での ng-hide の例

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

まとめ

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