Директиви AngularJS ng-click, ng-show & ng-hide із прикладом

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

Події AngularJS

Події AngularJS це функції, які дозволяють веб-додаткам взаємодіяти з введеними користувачами, такими як клацання миші, введення з клавіатури, наведення миші тощо. Події потрібно обробляти в веб-додатках, щоб виконувати певні завдання та дії. Він запускається, коли користувач виконує певну дію.

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

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

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

Під час цього курсу ми детально розглянемо директиви Event.

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

Команда «Директива ng-click» в AngularJS використовується для застосування спеціальної поведінки під час натискання елемента в HTML. Ця директива зазвичай використовується для кнопок, оскільки це найпоширеніший спосіб додавання подій, які відповідають на натискання, виконані користувачем. Він також використовується для появи спливаючих сповіщень при натисканні кнопки.

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

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

Давайте розглянемо простий приклад того, як ми можемо реалізувати подію click.

Приклад 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, щоб встановити значення count локальної змінної на 0.
  2. Потім ми вводимо директиву події ng-click для кнопки. У цій директиві ми пишемо код для збільшення значення змінної count на 1.
  3. Тут ми показуємо користувачеві значення змінної count.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

ng-click в AngularJS

З наведеного вище результату

  • Ми бачимо, що відображається кнопка «Збільшити», а значення змінної count спочатку дорівнює нулю.
  • Коли ви натискаєте кнопку «Збільшити», значення лічильника відповідно збільшується, як показано на вихідному зображенні нижче.

ng-click в AngularJS

СТАТТІ ПО ТЕМІ

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

Команда Директива ng-Show в AngularJS використовується, щоб показати або приховати заданий конкретний HTML елемент на основі виразу, наданого атрибуту ng-show. У фоновому режимі елемент HTML відображається або приховується шляхом видалення або додавання класу CSS .ng-hide до елемента. Це попередньо визначений клас CSS, який встановлює значення None для відображення.

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

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

У фоновому режимі елемент відображається або приховується шляхом видалення або додавання класу CSS .ng-hide до елемента.

Приклад ng-show в AngularJS

Давайте розглянемо ng-show в Angular. Приклад того, як ми можемо використовувати директиву “ngshow event” для відображення прихованого елемента.

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

Приклад шоу ng в 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» до об’єкта області видимості. Цей атрибут буде передано кутовому атрибуту ng-show (крок №2) для керування видимістю елемента керування div. Спочатку ми встановлюємо значення false, щоб під час першого відображення сторінки тег div було приховано. Примітка: - Якщо для атрибута ng-show встановлено значення true, наступний елемент керування, яким у нашому випадку є тег div, буде показано користувачеві. Якщо для атрибута ng-show встановлено значення false, керування буде приховано від користувача.
  4. Ми додаємо код до функції ShowHide, яка встановить для змінної-члена IsVisible значення true, щоб користувачеві міг бути показаний елемент AngularJS show hide у тегу click.

Якщо код для 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?

Команда директива ng-hide в AngularJS — це функція, за допомогою якої елемент буде приховано, якщо вираз TRUE. Якщо вираз має значення FALSE, буде показано елемент. У фоновому режимі елемент відображається або приховується шляхом видалення або додавання класу 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. Це тег, який ми будемо використовувати для показу hide в Angular на основі атрибута ng-show.
  3. У контролері ми приєднуємо змінну члена isVisible до об’єкта області. Цей атрибут буде передано кутовому атрибуту ng-show для керування видимістю елемента керування div. Спочатку ми встановлюємо значення false, щоб під час першого відображення сторінки тег div було приховано.
  4. Ми додаємо код до функції ShowHide, яка встановлює для змінної-члена IsVisible значення true, щоб користувач міг бачити тег div.

Якщо код для ng show hide виконано успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

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

З виходу,

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

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

Директиви слухача подій AngularJS

Ви можете додати слухачі подій AngularJS до своїх елементів HTML, використовуючи один або кілька з них директиви:

  • нг-розмиття
  • ng-зміна
  • ng-клацніть
  • ng-копія
  • нг-вирізати
  • ng-dblclick
  • нг-фокус
  • ng-клавіатура
  • ng-клавіатура
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-наведення миші
  • ng-mouseup
  • нг-паста

Підсумки

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