Директивы AngularJS ng-click, ng-show и ng-hide с примером

Автор: Джеймс Хартман Джеймс Хартман
Hours обновлено

События AngularJS

События AngularJS — это функциональные возможности, которые позволяют веб-приложениям взаимодействовать с пользовательскими вводами, такими как щелчок мышью, ввод с клавиатуры, наведение курсора мыши и т. д. События необходимо обрабатывать в веб-приложениях для выполнения определенных задач и действий. Он срабатывает, когда пользователь выполняет определенное действие.

При создании веб-приложений рано или поздно вашему приложению потребуется обрабатывать события DOM, такие как щелчки мыши, перемещения, нажатия клавиш, события изменения и т. д.

AngularJS может добавить функциональные возможности, которые можно использовать для обработки таких событий.

Например, если на странице есть кнопка и вы хотите что-то обработать при нажатии на кнопку, мы можем использовать директиву события Angular ng-click.

В ходе этого курса мы подробно рассмотрим директивы событий.

Что такое директива ng-click в AngularJS?

The «директива ng-click» в AngularJS используется для применения пользовательского поведения при щелчке элемента в HTML. Эта директива обычно используется для кнопок, поскольку это наиболее распространенный способ добавления событий, которые реагируют на клики, выполняемые пользователем. Он также используется для отображения всплывающих предупреждений при нажатии кнопки.

Синтаксис ng-click в AngularJS

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

Давайте рассмотрим простой пример того, как мы можем реализовать событие щелчка.

Пример ng-click в 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>

Пояснение к коду:

  1. Сначала мы используем директиву ng-init, чтобы установить значение счетчика локальной переменной равным 0.
  2. Затем мы добавляем к кнопке директиву события ng-click. В этой директиве мы пишем код для увеличения значения переменной count на 1.
  3. Здесь мы показываем пользователю значение переменной count.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Вывод:

ng-клик в AngularJS

Из приведенного выше вывода

  • Мы видим, что отображается кнопка «Приращение», а значение переменной count изначально равно нулю.
  • Когда вы нажимаете кнопку «Увеличить», значение счетчика увеличивается соответственно, как показано на выходном изображении ниже.

ng-клик в AngularJS

СТАТЬИ ПО ТЕМЕ

Что такое директива ng-show в AngularJS?

The Директива ng-Show в AngularJS используется для отображения или скрытия заданного конкретного HTML элемент на основе выражения, предоставленного атрибуту ng-show. В фоновом режиме элемент HTML отображается или скрывается путем удаления или добавления к элементу CSS-класса .ng-hide. Это предопределенный класс CSS, который устанавливает значение отсутствия отображения.

Синтаксис ng-show в AngularJS

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

В фоновом режиме элемент отображается или скрывается путем удаления или добавления к элементу CSS-класса .ng-hide.

Пример ng-show в AngularJS

Давайте посмотрим на ng-show в Angular. Пример того, как мы можем использовать директиву «ngshow event» для отображения скрытого элемента.

Директива ng-show в AngularJS

Пример ng show в Angular
<!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>

Пояснение к коду:

  1. Мы прикрепляем директиву события ng-click к элементу кнопки. Здесь мы ссылаемся на функцию под названием «ShowHide», которая определена в нашем контроллере — DemoController.
  2. Мы присоединяем атрибут ng-show к тегу div, который содержит текст Angular. Это тег, который мы собираемся показать/скрыть на основе атрибута ng-show.
  3. В контроллере мы прикрепляем переменную-член IsVisible к объекту области. Этот атрибут будет передан атрибуту angular ng-show (шаг № 2) для управления видимостью элемента управления div. Изначально мы устанавливаем для этого параметра значение false, чтобы при первом отображении страницы тег div был скрыт. Примечание: - Когда для атрибута ng-show установлено значение true, пользователю будет показан последующий элемент управления, которым в нашем случае является тег div. Если для атрибута ng-show установлено значение false, элемент управления будет скрыт от пользователя.
  4. Мы добавляем код в функцию ShowHide, которая установит для переменной-члена IsVisible значение true, чтобы пользователь мог видеть скрытый элемент AngularJS при нажатии тега клика.

Если код для ng-show и ng-hide в AngularJS выполнен успешно, при запуске кода в браузере будет показан следующий вывод.

Выход: 1

Директива ng-show в AngularJS

Из вывода,

  • Первоначально вы можете видеть, что тег div с текстом «AngularJS» не отображается, и это связано с тем, что для объекта области видимости isVisible изначально установлено значение false, которое затем впоследствии передается в директиву ng-show тега div.
  • Когда вы нажимаете кнопку «Показать AngularJS», переменная-член isVisible становится истинной, и, следовательно, текст «Angular» становится видимым для пользователя. Вывод ниже будет показан пользователю.

Директива ng-show в AngularJS

В выводе теперь отображается тег div с текстом Angular.

Что такое директива ng-hide в AngularJS?

The директива ng-hide в AngularJS — это функция, с помощью которой элемент будет скрыт, если выражение имеет значение TRUE. Если выражение имеет значение ЛОЖЬ, элемент будет показан. В фоновом режиме элемент отображается или скрывается путем удаления или добавления к элементу CSS-класса .ng-hide.

Синтаксис ng-hide в AngularJS

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

С другой стороны, при использовании ng-hide элемент скрывается, если выражение истинно, и отображается, если оно ложно.

Пример ng-hide в AngularJS

Давайте посмотрим на аналогичный пример ng-hide, показанный для ngShow, чтобы продемонстрировать, как можно использовать атрибуты ng-hide и ng-show.

Директива ng-hide в AngularJS

Пример ng-hide в AngularJS
<!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>

Пояснение к коду:

  1. Мы прикрепляем директиву события ng-click к элементу кнопки. Здесь мы ссылаемся на функцию ShowHide, которая определена в нашем контроллере — DemoController.
  2. Мы прикрепляем атрибут ng-hide к тегу div, который содержит текст Angular. Это тег, который мы будем использовать для отображения скрытия в Angular на основе атрибута ng-show.
  3. В контроллере мы прикрепляем переменную-член isVisible к объекту области. Этот атрибут будет передан атрибуту angular ng-show для управления видимостью элемента управления div. Изначально мы устанавливаем для этого параметра значение false, чтобы при первом отображении страницы тег div был скрыт.
  4. Мы добавляем код в функцию ShowHide, которая установит для переменной-члена IsVisible значение true, чтобы тег div мог быть показан пользователю.

Если код ng show display выполнен успешно, при запуске кода в браузере будет показан следующий вывод.

Вывод:

Директива ng-hide в AngularJS

Из вывода,

  • Первоначально вы можете видеть, что тег div с текстом «AngularJs» изначально отображается, поскольку значение свойства false отправляется в директиву ng-hide.
  • Когда мы нажимаем кнопку «Скрыть Angular», значение свойства true будет отправлено в директиву ng-hide. Следовательно, будет показан приведенный ниже вывод, в котором слово «Angular» будет скрыто.

Директива ng-hide в AngularJS

Директивы прослушивателя событий AngularJS

Вы можете добавить прослушиватели событий AngularJS в свои HTML-элементы, используя один или несколько из них. Директивы:

  • нг-размытие
  • нг-изменить
  • нг-щелчок
  • ng-копия
  • нг-вырез
  • нг-дблклик
  • нг-фокус
  • нг-keydown
  • нг-клавиша
  • нг-keyup
  • нг-mousedown
  • нг-mouseenter
  • нг-mouseleave
  • нг-mousemove
  • нг-наведение мыши
  • нг-mouseup
  • нг-паста

Резюме

  • Директивы событий используются в Angular для добавления пользовательского кода для реагирования на события, генерируемые вмешательством пользователя, такие как нажатия кнопок, щелчки клавиатуры и мыши и т. д.
  • Наиболее распространенной директивой событий является директива AngularJS ng-click, которая используется для обработки событий щелчка. Чаще всего это используется для нажатия кнопок AngluarJS, где можно добавить код, реагирующий на нажатие кнопки.
  • HTML-элементы также можно скрыть или показать пользователю соответственно с помощью Директива AngularJS ng-show, Директива Angular ng-hide и атрибуты ng-visible.