AngularJS ng-click, ng-show & ng-hide Direktive

By: James Hartman James Hartman
Hours Aลพurirano

โšก Pametni saลพetak

AngularJS dogaฤ‘aji omoguฤ‡uju web aplikaciji da reagira na korisniฤki unos kao ลกto su klikovi miลกa, pritisci tipki i radnje zadrลพavanja pokazivaฤa miลกa. Direktive, ukljuฤujuฤ‡i ng-click, ng-show i ng-hide, deklarativno veลพu to ponaลกanje u markupu umjesto putem ruฤnih DOM sluลกaฤa.

  • ๐Ÿ–ฑ๏ธ Obrada klikova: ng-click pridruลพuje izraz ili funkciju kontrolera elementu, najฤeลกฤ‡e gumbu.
  • ๐Ÿ‘๏ธ Uvjetni prikaz: ng-show prikazuje element kada je njegov izraz istinit, dok ng-hide uklanja element kada je izraz istinit.
  • ๐ŸŽจ Mehanizam: Obje direktive prekljuฤuju ugraฤ‘enu CSS klasu ng-hide, koja postavlja display na none, tako da element ostaje u DOM-u.
  • ๐Ÿ”— Povezivanje opsega: ฤŒlanska varijabla smjeลกtena na $scope upravlja vidljivoลกฤ‡u, a njezina promjena unutar rukovatelja odmah aลพurira prikaz.
  • ๐Ÿ“‹ Raspon direktive: Osamnaest direktiva sluลกaฤa pokriva dogaฤ‘aje zamuฤ‡enja, promjene, fokusiranja, tipkovnice, miลกa, lijepljenja i slanja.
  • โš ๏ธ Status podrลกke: AngularJS je dosegao kraj podrลกke 31. prosinca 2021., tako da bi novi projekti trebali biti usmjereni na moderni Angular.
Proฤitaj viลกe

AngularJS ng-click ng-show ng-hide Direktive

AngularJS dogaฤ‘aji

AngularJS dogaฤ‘aji su funkcionalnosti koje omoguฤ‡uju web aplikacijama interakciju s korisniฤkim unosima kao ลกto su klikovi miลกem, unos s tipkovnice i zadrลพavanje pokazivaฤa miลกa iznad polja. Dogaฤ‘aji se moraju obraditi u web aplikacijama kako bi se izvrลกili odreฤ‘eni zadaci i radnje, a svaki se pokreฤ‡e kada korisnik izvrลกi odgovarajuฤ‡u radnju.

Prilikom izrade web aplikacija, prije ili kasnije vaลกa aplikacija mora obraditi DOM dogaฤ‘aje kao ลกto su klikovi i pomicanja miลกa, pritisci tipki na tipkovnici i dogaฤ‘aji promjena. AngularJS pruลพa direktive koje deklarativno obraฤ‘uju te dogaฤ‘aje.

Na primjer, ako gumb na stranici treba neลกto obraditi kada se klikne na njega, direktiva dogaฤ‘aja ng-click osigurava tu udicu.

โš ๏ธ Obavijest za podrลกku: AngularJS dosegnut kraj ลพivotnog vijeka 31. prosinca 2021. i ne prima daljnje zakrpe ili sigurnosne ispravke od Angular tima. Donje upute ostaju toฤne za odrลพavanje postojeฤ‡ih AngularJS 1.x aplikacija; za novi rad koristite moderne Kutni, gdje su ove direktive zamijenjene vezanjem dogaฤ‘aja kao ลกto je (click) i *ngIf.

ล to je ng-click Direktiva u AngularJS?

The "ng-click direktiva" U AngularJS-u primjenjuje prilagoฤ‘eno ponaลกanje kada se klikne na HTML element. Obiฤno se koristi na gumbima, buduฤ‡i da su oni najฤeลกฤ‡e mjesto za dodavanje odgovora na klik, a takoฤ‘er se koristi za podizanje upozorenja pri kliku.

Sintaksa ng-click u AngularJS

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

Primjer ng-click-a u AngularJS-u

U ovom primjeru ng-click-a, varijabla brojaฤa se poveฤ‡ava svaki put kada korisnik klikne gumb.

ng-click Direktiva u AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body ng-app="">

<script src="https://code.angularjs.org/1.8.3/angular.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>

Code Objaลกnjenje:

  1. Direktiva ng-init postavlja lokalnu varijablu count na 0.
  2. Direktiva ng-click na gumbu poveฤ‡ava count za 1 na svaki klik.
  3. Interpolacija {{count}} prikazuje korisniku trenutnu vrijednost.

Izlaz:

ng-klik u AngularJS

Prikazuje se gumb Poveฤ‡aj, a broj je inicijalno nula. Klikom na njega poveฤ‡ava se vrijednost, kao ลกto je prikazano na slici ispod.

ng-klik u AngularJS

ล to je ng-show Direktiva u AngularJS?

The direktiva ng-show prikazuje ili skriva dano HTML element na temelju izraza navedenog u atributu ng-show. Interno se element prikazuje ili skriva uklanjanjem ili dodavanjem .ng-hide CSS klasa, unaprijed definirana klasa koja postavlja display do none.

Sintaksa ng-show u AngularJS

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

Primjer ng-show u AngularJS

Ovaj primjer koristi ng-show za otkrivanje skrivenog elementa.

Direktiva ng-show u AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.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>

Code Objaลกnjenje:

  1. Direktiva ng-click na gumbu referencira a ShowHide funkcija definirana u kontroleru DemoController.
  2. Atribut ng-show pridruลพen je divu koji sadrลพi tekst Angular. Ovo je element ฤija se vidljivost kontrolira.
  3. U kontroleru, IsVisible Varijabla ฤlanica se postavlja na objekt opsega i inicijalizira na false, pa je div skriven kada se stranica prvi put uฤita. S ng-show, vrijednost od istinski prikazuje element i laลพan skriva ga.
  4. The ShowHide skupovi funkcija IsVisible na true kako bi div postao vidljiv.

Izlaz:

Direktiva ng-show u AngularJS

Div koji sadrลพi tekst se inicijalno ne prikazuje, jer IsVisible poฤinje kao laลพno. Klikom Prikaลพi kutni postavlja ga na true i tekst postaje vidljiv.

Direktiva ng-show u AngularJS

POVEZANI ฤŒLANCI

ล to je ng-hide Direktiva u AngularJS?

The ng-hide direktiva skriva element kada se njegov izraz evaluira kao TRUE, a prikazuje element kada je izraz FALSE - potpuna inverzija od ng-show. Interno koristi isto .ng-hide CSS klasa.

Sintaksa ng-hide u AngularJS

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

Primjer ng-hide u AngularJS

Ovaj primjer odraลพava primjer ng-show tako da se dvije direktive mogu izravno usporediti.

Direktiva ng-hide u AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.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 = true;
        };
    });
</script>

</body>
</html>

Code Objaลกnjenje:

  1. Direktiva ng-click na gumbu referencira ShowHide funkcija u sustavu DemoController.
  2. The ng-hide Atribut je pridruลพen divu koji sadrลพi tekst Angular.
  3. IsVisible inicijalizira se na falseBuduฤ‡i da je ovo ng-hide umjesto ng-show, vrijednost false znaฤi da je div vidljiv kada se stranica prvi put uฤitava.
  4. The ShowHide skupovi funkcija IsVisible na true, ลกto skriva div.

Izlaz:

Direktiva ng-hide u AngularJS

Div se inicijalno prikazuje jer se false prosljeฤ‘uje ng-hideu. Klikom Sakrij kutni prolazi kao istina i rijeฤ nestaje.

Direktiva ng-hide u AngularJS

ng-show vs ng-hide vs ng-if: Kljuฤne razlike

Tri direktive kontroliraju hoฤ‡e li korisnik vidjeti element, a odabir izmeฤ‘u njih utjeฤe i na ponaลกanje i na performanse renderiranja. Prve dvije samo prebacuju CSS klasu, tako da je element uvijek prisutan na stranici; treฤ‡a dodaje i uklanja sam element.

Aspekt ng-show ng-hide ng-if
Element vidljiv kada Izraz je istinit Izraz je laลพan Izraz je istinit
Element u DOM-u Uvijek Uvijek Samo dok je istina
Koriลกtena metoda Toggles .ng-hide klasa Toggles .ng-hide klasa Stvara i uniลกtava element
Podreฤ‘eni opseg Dijeli nadreฤ‘eni opseg Dijeli nadreฤ‘eni opseg Stvara novi podreฤ‘eni opseg
Promatraฤi kada su skriveni Joลก uvijek aktivan Joลก uvijek aktivan ukloniti
Najbolje za ฤŒesto prebacivanje laganog sadrลพaja Invertirani uvjeti Teลพak sadrลพaj se rijetko prikazuje

Koristite ng-show ili ng-hide kada se element ฤesto mijenja, jer se element nikada ne obnavlja, a mijenjanje koลกta samo promjenu klase. Koristite ng-if za skupe dijelove koji se rijetko prikazuju, jer uklanjanje elementa takoฤ‘er uklanja njegove promatraฤe i smanjuje troลกkove saลพetka u svakom ciklusu.

AngularJS smjernice sluลกatelja dogaฤ‘aja

Moลพete dodati AngularJS sluลกaฤe dogaฤ‘aja HTML elementima koristeฤ‡i jedan ili viลกe ovih direktive:

  • ng-zamuฤ‡enje
  • ng-promjena
  • ng-klik
  • ng-kopija
  • ng-rez
  • ng-dblclick
  • ng-fokus
  • ng-tipka
  • ng-tipkovnica
  • ng-tipka
  • ng-spuลกtanje miลกa
  • ng-mouseenter
  • ng-miลก ostavi
  • ng-pomakni miลกa
  • ng-prelazak miลกem
  • ng-miลก gore
  • ng-pasta
  • ng-podnesi

Svaka direktiva prihvaฤ‡a izraz, a sirovi dogaฤ‘aj preglednika dostupan je unutar njega kao $event kada rukovatelju trebaju detalji poput pritisnute tipke ili koordinata klika.

Pitanja i odgovori

Proฤ‘ite rezervirano $event varijabla, kao u ng-click="handle($event)"Kontroler zatim prima izvorni dogaฤ‘aj i moลพe proฤitati cilj, koordinate ili pozvati preventDefault.

ng-repeat stvara podreฤ‘eni opseg za svaku stavku, pa dodjeljivanje primitiva unutar rukovatelja aลพurira samo to podreฤ‘eno. Piลกite u svojstvo objekta na nadreฤ‘enom opsegu ili koristite $parent, kako bi promjena bila vidljiva izvana.

Djelomiฤno. AI alati pretvaraju ng-click u (click) i ng-show to *ngIf pouzdano, ali logika ovisna o opsegu i dvosmjerna povezivanja zahtijevaju ruฤni pregled jer AngularJS opseg nema izravni Angular ekvivalent.

AI asistenti brzo uoฤavaju uobiฤajene uzroke: nedostajuฤ‡u ng-aplikaciju, naziv kontrolera koji ne odgovara registraciji modula ili tipografsku pogreลกku u atributu direktive. Predloลพeno rjeลกenje joลก uvijek treba testirati u pregledniku.

Ne. AngularJS nudi ng-show, ng-hide i ng-if only. Ne postoji direktiva ng-visible, a referenciranje na nju ne proizvodi nikakav uฤinak jer AngularJS ignorira neprepoznate atribute.

Saลพmite ovu objavu uz: