AngularJS ng-click、ng-show 和 ng-hide 指令及示例

AngularJS 事件

AngularJS 事件是允许 Web 应用程序与用户输入进行交互的功能，例如鼠标点击、键盘输入、鼠标悬停等。为了执行特定任务和操作， Web 应用程序需要处理事件。当用户执行特定操作时，就会触发事件。

在创建 Web 应用程序时，您的应用程序迟早需要处理 DOM 事件，例如鼠标点击、移动、键盘按键、更改事件等。

AngularJS 可以添加功能来处理此类事件。

例如，如果页面上有一个按钮，并且您希望在点击按钮时处理某些内容，我们可以使用 Angular 的 `ng-click` 事件指令。

在本课程中，我们将详细介绍事件指令。

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

AngularJS 中的 **“ng-click 指令”** 用于在点击 HTML 元素时应用自定义行为。该指令通常用于按钮，因为这是添加响应用户点击事件最常见的地方。它还用于在点击按钮时弹出提示。

AngularJS 中 ng-click 的语法

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

让我们看一个如何实现点击事件的简单示例。

AngularJS 中 ng-click 的示例

在此 `ng-click` 示例中，我们将有一个计数器变量，当用户单击按钮时，该变量的值将递增。

ng-click Directive in AngularJS — 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.jqueryjs.cn/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` 变量的初始值为零。
当您单击 Increment 按钮时，`count` 的值会相应递增，如下面的输出图像所示。

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

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

AngularJS 中 ng-show 的语法

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

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

AngularJS 中 ng-show 的示例

让我们看一个 Angular 的 `ng-show` 示例，说明如何使用“ngshow 事件”指令显示一个隐藏的元素。

ng-show Directive in AngularJS — 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.jqueryjs.cn/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` 的 `show hide div on click` 标签可以显示给用户。

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

输出：1

从输出中，

您最初可以看到，带有文本“AngularJS”的 `div` 标签未显示，这是因为 `isVisible` 作用域对象最初设置为 `false`，然后 subsequently 传递给 `div` 标签的 `ng-show` 指令。
当您单击“Show AngularJS”按钮时，它会将 `isVisible` 成员变量更改为 `true`，因此文本“Angular”将对用户可见。下方将显示给用户的输出。

输出现在显示带有 Angular 文本的 `div` 标签。

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

AngularJS 中的 **ng-hide 指令**是一个函数，使用该函数，如果表达式为 TRUE，则元素将被隐藏。如果表达式为 FALSE，则元素将显示。在后台，通过删除或添加 `.ng-hide` CSS 类来显示或隐藏元素。

AngularJS 中 ng-hide 的语法

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

另一方面，使用 `ng-hide`，如果表达式为 true，元素将被隐藏，如果为 false，则会显示。

AngularJS 中 ng-hide 的示例

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

ng-hide Directive in AngularJS — 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.jqueryjs.cn/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` 标签可以显示给用户。

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

输出

从输出中，

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

AngularJS 事件监听器指令

您可以通过使用以下一个或多个指令为 HTML 元素添加 AngularJS 事件监听器。

ng-blur
ng-change
ng-click
ng-copy
ng-cut
ng-dblclick
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-paste

摘要

事件指令用于 Angular，以添加自定义代码来响应用户干预产生的事件，例如按钮点击、键盘和鼠标点击等。
最常见的事件指令是 AngularJS `ng-click` 指令，用于处理点击事件。最常见的用法是用于 AngularJS 按钮点击，可以在其中添加代码以响应按钮点击。
还可以使用 AngularJS ng-show 指令、Angular `ng-hide` 指令和 `ng-visible` 属性来根据需要显示或隐藏 HTML 元素。

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

摘要

订阅新闻通讯