AngularJS ng-click, ng-show & ng-hide директиви с пример

AngularJS събития

AngularJS събития са функционалностите, които позволяват на уеб приложенията да взаимодействат с потребителски входове като щракване с мишката, въвеждане на клавиатура, задържане на мишката и т.н. Събитията трябва да се обработват в уеб базирани приложения, за да се изпълняват конкретни задачи и действия. Задейства се, когато потребителят извърши определено действие.

Когато създавате уеб-базирани приложения, рано или късно вашето приложение ще трябва да обработва DOM събития като щраквания на мишката, ходове, натискания на клавиатурата, промени на събития и т.н.

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

Например, ако има бутон на страницата и искате да обработите нещо, когато бутонът бъде щракнат, можем да използваме директивата за събитие Angular ng-click.

По време на този курс ще разгледаме подробно директивите за събития.

Какво е директива 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>

Обяснение на кода:

Първо използваме директивата ng-init, за да зададем стойността на локална променлива count на 0.
След това въвеждаме директивата за събитието ng-click към бутона. В тази директива ние пишем код за увеличаване на стойността на променливата count с 1.
Тук показваме стойността на променливата count на потребителя.

Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.

Изход:

От горния резултат,

Виждаме, че бутонът „Увеличаване“ се показва и стойността на променливата за броене първоначално е нула.
Когато щракнете върху бутона Увеличаване, стойността на броя се увеличава съответно, както е показано на изходното изображение по-долу.

Какво е директива 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>

Обяснение на кода:

Прикрепяме директивата за събитието ng-click към елемента бутон. Тук се позоваваме на функция, наречена „ShowHide“, която е дефинирана в нашия контролер – DemoController.
Прикачваме атрибута ng-show към div таг, който съдържа текста Angular. Това е етикетът, който ще покажем/скрием въз основа на атрибута ng-show.
В контролера прикачваме членската променлива „IsVisible“ към обекта на обхвата. Този атрибут ще бъде предаден на атрибута ng-show angular (стъпка №2), за да контролира видимостта на контролата div. Първоначално задаваме това на false, така че когато страницата се покаже за първи път, етикетът div ще бъде скрит. Забележка: - Когато атрибутите ng-show са зададени на true, последващата контрола, която в нашия случай е етикетът div, ще бъде показана на потребителя. Когато атрибутът ng-show е зададен на false, контролата ще бъде скрита от потребителя.
Добавяме код към функцията ShowHide, която ще настрои членската променлива IsVisible на true, така че AngularJS show hide div върху маркера за кликване да може да се показва на потребителя.

Ако кодът за ng-show и ng-hide в AngularJS се изпълни успешно, следният изход ще бъде показан, когато стартирате кода си в браузъра.

Изход: 1

От изхода,

Първоначално можете да видите, че етикетът div, който има текста „AngularJS“, не се показва и това е така, защото обектът на обхват isVisible първоначално е зададен на false, което след това се предава на директивата ng-show на маркера div.
Когато щракнете върху бутона „Покажи AngularJS“, той променя членската променлива isVisible, за да стане true и следователно текстът „Angular“ става видим за потребителя. Изходът по-долу ще бъде показан на потребителя.

Изходът вече показва тага div с ъгловия текст.

Какво е директива 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>

Обяснение на кода:

Прикрепяме директивата за събитието ng-click към елемента бутон. Тук се позоваваме на функция, наречена ShowHide, която е дефинирана в нашия контролер – DemoController.
Прикачваме атрибута ng-hide към div таг, който съдържа текста Angular. Това е тагът, който ще използваме, за да покажем hide в Angular въз основа на атрибута ng-show.
В контролера прикачваме членската променлива isVisible към обекта на обхвата. Този атрибут ще бъде предаден на атрибута ng-show angular, за да контролира видимостта на контролата div. Първоначално задаваме това на false, така че когато страницата се покаже за първи път, етикетът div ще бъде скрит.
Добавяме код към функцията ShowHide, която ще зададе членската променлива IsVisible на true, така че етикетът div да може да се показва на потребителя.

Ако кодът за ng show hide се изпълни успешно, следният изход ще бъде показан, когато стартирате кода си в браузъра.

Изход:

От изхода,

Първоначално можете да видите, че тагът div, който има текста „AngularJs“, първоначално се показва, тъй като стойността на свойството false се изпраща към директивата ng-hide.
Когато щракнем върху бутона „Hide Angular“, стойността на свойството true ще бъде изпратена към директивата ng-hide. Следователно ще се покаже изходът по-долу, в който думата „Angular“ ще бъде скрита.

AngularJS директиви за приемане на събития

Можете да добавите AngularJS слушатели на събития към вашите HTML елементи, като използвате един или повече от тях директиви:

ng-размазване
ng-промяна
ng-щракване
ng-копие
нг-изрязване
ng-dblclick
ng-фокус
ng-натискане на клавиши
ng-натискане на клавиш
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-преместване на мишката
ng-поставяне на мишката
ng-mouseup
ng-паста

Oбобщение

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

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 директиви за приемане на събития

Oбобщение

Регистрирайте се за бюлетина