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 中的 ng click 示例

<!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变量的值最初为零。
当您单击“增加”按钮时，计数值会相应增加，如下面的输出图像所示。

AngularJS 中的 ng-show 指令是什么？

这个 ng-Show 指令 在 AngularJS 中用于显示或隐藏给定的特定 HTML 根据提供给 ng-show 属性的表达式，显示或隐藏元素。在后台，通过在元素上删除或添加 .ng-hide CSS 类来显示或隐藏 HTML 元素。这是一个预定义的 CSS 类，它将显示设置为无。

AngularJS 中 ng-show 的语法

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

在后台，通过删除或添加元素上的 .ng-hide CSS 类来显示或隐藏元素。

AngularJS 中的 ng-show 示例

让我们看一个 Angular 中的 ng-show 示例，了解如何使用“ngshow event”指令来显示隐藏元素。

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”的函数。
我们将 ng-show 属性附加到包含文本 Angular 的 div 标签。我们将根据 ng-show 属性显示/隐藏该标签。
在控制器中，我们将“IsVisible”成员变量附加到范围对象。此属性将传递给 ng-show angular 属性（步骤 2），以控制 div 控件的可见性。我们最初将其设置为 false，以便在首次显示页面时隐藏 div 标签。 注： - 当属性 ng-show 设置为 true 时，后面的控件（本例中为 div 标签）将显示给用户。当属性 ng-show 设置为 false 时，该控件将对用户隐藏。
我们正在向 ShowHide 函数添加代码，将 IsVisible 成员变量设置为 true，以便 AngularJS 可以向用户显示点击标签时的显示隐藏 div。

如果 AngularJS 中的 ng-show 和 ng-hide 代码成功执行，则在浏览器中运行代码时将显示以下输出。

输出1

从输出来看，

您最初可以看到带有文本“AngularJS”的 div 标签未显示，这是因为 isVisible 范围对象最初设置为 false，随后传递给 div 标签的 ng-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 时，如果表达式为真，则元素将被隐藏，如果表达式为假，则元素将被显示。

AngularJS 中的 ng-hide 示例

让我们看一下与 ngShow 类似的 ng-hide 示例，以展示如何使用 ng-hide 和 ng-show 属性。

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 成员变量附加到范围对象。此属性将传递给 ng-show angular 属性，以控制 div 控件的可见性。我们最初将其设置为 false，以便在首次显示页面时隐藏 div 标签。
我们正在向 ShowHide 函数添加代码，将 IsVisible 成员变量设置为 true，以便可以向用户显示 div 标签。

如果 ng show hide 代码成功执行，则在浏览器中运行代码时将显示以下输出。

输出：

从输出来看，

您最初可以看到，带有文本“AngularJs”的 div 标签最初显示出来，因为 false 的属性值被发送到 ng-hide 指令。
当我们点击“隐藏 Angular”按钮时，属性值 true 将发送到 ng-hide 指令。因此将显示以下输出，其中单词“Angular”将被隐藏。

AngularJS 事件监听器指令

您可以使用以下一个或多个将 AngularJS 事件监听器添加到 HTML 元素中指令:

模糊
ng-改变
ng-点击
ng-复制
ng-cut
ng-双击
ng-焦点
ng-keydown
ng-按键
ng-键盘输入
ng-鼠标按下
ng-鼠标进入
ng-鼠标离开
ng-鼠标移动
ng-鼠标悬停
ng-mouseup
粘贴

结语

事件指令在 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 事件监听器指令

结语

注册简报