Izrazi AngularJS: ARRAY, Objekti, $ eval, žice (primjeri)

Sadržaj:

Anonim

Što su kutni JS izrazi?

Izrazi su varijable koje su definirane u dvostrukim zagradama {{}}. Oni se vrlo često koriste u Angular JS-u, a vidjeli biste ih u našim prethodnim vodičima.

U ovom vodiču naučit ćete-

  • Objasnite izraze Angular.js na primjeru
  • AngularJS brojevi
  • AngularJS žice
  • Objekti AngularJS
  • AngularJS nizovi
  • Mogućnosti i ograničenja izraza AngularJS
  • Razlika između izraza i $ eval

Objasnite izraze Angular.js na primjeru

Izrazi AngularJS su oni koji su napisani unutar dvostrukih zagrada {{izraz}}.

Sintaksa:

Jednostavan primjer izraza je {{5 + 6}}.

Izrazi Angular.JS koriste se za povezivanje podataka na HTML na isti način kao i ng-bind direktiva. AngularJS prikazuje podatke točno na mjestu gdje je izraz postavljen.

Pogledajmo primjer izraza Angular.JS.

U ovom primjeru samo želimo prikazati jednostavan dodatak brojeva kao izraz.

Event Registration

Guru99 Global Event


Addition : {{6+9}}

Objašnjenje koda:

  1. Direktiva ng-app u našem primjeru je prazna, kao što je prikazano na gornjem snimku zaslona. To samo znači da ne postoji modul za dodjeljivanje kontrolera, direktiva i usluga pridruženih kodu.
  2. Dodajemo jednostavan izraz koji gleda na zbrajanje 2 broja.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.

Izlaz:

Iz rezultata,

  • Vidljivo je da se zbrajaju dva broja 9 i 6 i prikazuje se dodana vrijednost 15.

Kutni.JS brojevi

Izrazi se mogu koristiti i za rad s brojevima. Pogledajmo primjer izraza Angular.JS s brojevima.

U ovom primjeru samo želimo prikazati jednostavno množenje 2 brojčane varijable zvane marža i dobit i prikazati njihovu pomnoženu vrijednost.

Event Registration

Guru99 Global Event


Total profit margin{{margin*profit}}

Objašnjenje koda:

  1. Direktiva ng-init koristi se u angular.js za definiranje varijabli i njihovih odgovarajućih vrijednosti u samom pogledu. To je nekako poput definiranja lokalnih varijabli za kodiranje u bilo kojem programskom jeziku. U ovom slučaju definiramo dvije varijable koje se nazivaju marža i dobit te im dodjeljujemo vrijednosti.
  2. Tada koristimo 2 lokalne varijable i množimo njihove vrijednosti.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.

Izlaz:

Iz rezultata,

  • Jasno se može vidjeti da se množenje 2 broja 2 i 200 odvija, a prikazana je pomnožena vrijednost 400.

AngularJS žice

Izrazi se mogu koristiti i za rad sa žicama. Pogledajmo primjer Angular JS izraza sa nizovima.

U ovom primjeru definirat ćemo 2 niza "firstName" i "lastName" i prikazati ih pomoću izraza u skladu s tim.

Event Registration

Guru99 Global Event


   First Name : {{firstName}}
   last Name : {{lastName}}

Objašnjenje koda:

  1. Koristi se ng-init direktiva definirajte varijable firstName s vrijednošću "Guru" i varijablu lastName s vrijednošću "99".
  2. Zatim koristimo izraze {{firstName}} i {{lastName}} da pristupimo vrijednosti ovih varijabli i u skladu s tim prikažemo u prikazu.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.

Izlaz:

Iz rezultata se jasno vidi da su vrijednosti firstName i lastName prikazane na zaslonu.

Kutni.JS objekti

Izrazi se mogu koristiti i za rad s JavaScript objektima.

Pogledajmo primjer izraza Angular.JS s javascript objektima. Javascript objekt sastoji se od para imena i vrijednosti.

Ispod je primjer sintakse javascript objekta.

Sintaksa:

var car = {type:"Ford", model:"Explorer", color:"White"};

U ovom primjeru definirat ćemo jedan objekt kao objekt osobe koji će imati 2 para vrijednosti ključa "firstName" i "lastName".

Event Registration

Guru99 Global Event


   First Name : {{person.firstName}}
   Last Name : {{person.lastName}}

Objašnjenje koda:

  1. Direktiva ng-init koristi se za definiranje objektne osobe koja zauzvrat ima parove ključnih vrijednosti firstName s vrijednošću "Guru" i varijablom lastName s vrijednošću "99".
  2. Tada koristimo izraze {{person.firstName}} i {{person.secondName}} da pristupimo vrijednosti ovih varijabli i u skladu s tim prikažemo u prikazu. Budući da su stvarne članske varijable dio objektne osobe, moraju joj pristupiti s točkom (.) Notacijom da bi pristupile svojoj stvarnoj vrijednosti.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.

Izlaz:

Iz rezultata,

  • Jasno se može vidjeti da su vrijednosti "firstName" i "secondName" prikazane na zaslonu.

AngularJS nizovi

Izrazi se mogu koristiti i za rad s nizovima. Pogledajmo primjer Angular JS izraza s nizovima.

U ovom ćemo primjeru definirati niz koji će sadržavati ocjene učenika iz 3 predmeta. U prikazu ćemo u skladu s tim prikazati vrijednost tih oznaka.

Event Registration

Guru99 Global Event


Student Marks
   Subject1 : {{marks[0] }}
   Subject2 : {{marks[1] }}
   Subject3 : {{marks[2] }}
   

Objašnjenje koda:

  1. Koristi se ng-init direktiva definirajte niz s imenom "oznake" s 3 vrijednosti 1, 15 i 19.
  2. Tada koristimo izraze oznaka [index] za pristup svakom elementu niza.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.

Izlaz:

Iz rezultata se jasno može vidjeti da se prikazuju oznake koje su definirane u polju.

Mogućnosti i ograničenja izraza AngularJS

Kutne.JS mogućnosti izražavanja

  1. Kutni izrazi su poput JavaScript izraza. Stoga ima istu snagu i fleksibilnost.
  2. U JavaScript-u, kada pokušate procijeniti nedefinirana svojstva, on generira ReferenceError ili TypeError. U Angular-u, evaluacija izraza oprašta i generira nedefinirano ili nulu.
  3. Netko se može koristiti filtrima unutar izraza za oblikovanje podataka prije prikazivanja.

Kutna ograničenja JS izraza

  1. Trenutno nema dostupnosti za upotrebu uvjetnih uvjeta, petlji ili izuzetaka u kutnom izrazu
  2. Ne možete deklarirati funkcije u Angular izrazu, čak ni unutar ng-init direktive.
  3. Ne mogu se stvoriti regularni izrazi u kutnom izrazu. Regularni izraz kombinacija je simbola i znakova koji se koriste za pronalaženje nizova kao što je. * \. Txt $. Takvi se izrazi ne mogu koristiti unutar izraza Angular JS.
  4. Također, ne može se koristiti ili poništiti u kutnom izrazu.

Razlika između izraza i $ evala

Funkcija $ eval omogućuje procjenu izraza unutar samog kontrolera. Dakle, dok se izrazi koriste za ocjenu u prikazu, $ eval se koristi u funkciji kontrolera.

Pogledajmo jednostavan primjer o tome.

U ovom primjeru,

Upravo ćemo upotrijebiti funkciju $ eval da dodamo 2 broja i učinimo je dostupnom u objektu opsega kako bi se mogla prikazati u prikazu.

Event Registration


Guru99 Global Event

{{value}}

Objašnjenje koda:

  1. Prvo definiramo dvije varijable 'a' i 'b', od kojih svaka ima vrijednost 1.
  2. Koristimo funkciju $ scope. $ Eval da bismo procijenili dodavanje 2 varijable i dodijelili je varijabli opsega 'value'.
  3. Tada u prikazu samo prikazujemo vrijednost varijable 'value'.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.

Izlaz:

Gornji izlaz prikazuje izlaz izraza koji je procijenjen u kontroleru. Gornji rezultati pokazuju da je izraz $ eval upotrijebljen za dodavanje 2 varijable opsega 'a i b' s rezultatom poslanim i prikazanim u prikazu.

Sažetak:

  • Vidjeli smo kako se izrazi u Angular JS mogu koristiti za procjenu regularnih JavaScript izraza poput izraza, poput jednostavnog zbrajanja brojeva.
  • Direktiva ng-init može se koristiti za definiranje varijabli u redu koje se mogu koristiti u prikazu.
  • Izrazi se mogu raditi za primitivne tipove kao što su nizovi i brojevi.
  • Izrazi se također mogu koristiti za rad s drugim vrstama kao što su JavaScript objekti i nizovi.
  • Izrazi u Angular JS-u imaju nekoliko ograničenja kao što je, na primjer, ne imati regularne izraze ili koristiti funkcije, petlje ili uvjetne izraze.