Izrazi AngularJS: ARRAY, Objekti, $ eval, Strings (primeri)

Kazalo:

Anonim

Kaj so kotni izrazi JS?

Izrazi so spremenljivke, ki so bile definirane v dvojnih oklepajih {{}}. V Angular JS se zelo pogosto uporabljajo in videli bi jih v naših prejšnjih vajah.

V tej vadnici boste izvedeli-

  • Pojasnite izraze Angular.js s primerom
  • Številke JS
  • Nizov AngularJS
  • Predmeti AngularJS
  • Polja AngularJS
  • Zmogljivosti in omejitve izražanja AngularJS
  • Razlika med izrazi in $ eval

Pojasnite izraze Angular.js s primerom

Izrazi AngularJS so tisti, ki so zapisani v dvojnih oklepajih {{izraz}}.

Sintaksa:

Preprost primer izraza je {{5 + 6}}.

Izrazi Angular.JS se uporabljajo za vezanje podatkov na HTML na enak način kot direktiva ng-bind. AngularJS prikazuje podatke natančno na mestu, kjer je izraz postavljen.

Oglejmo si primer izrazov Angular.JS.

V tem primeru želimo samo izraz preprostega dodajanja števil.

Event Registration

Guru99 Global Event


Addition : {{6+9}}

Razlaga kode:

  1. Direktiva ng-app v našem primeru je prazna, kot je prikazano na zgornjem posnetku zaslona. To pomeni samo, da kodi ni priložen modul za dodelitev krmilnikov, direktiv in storitev.
  2. Dodajamo preprost izraz, ki obravnava dodajanje 2 števil.

Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.

Izhod:

Iz rezultata,

  • Vidno je, da pride do seštevanja številk 9 in 6 in se prikaže dodana vrednost 15.

Kotne.JS številke

Izrazi se lahko uporabljajo tudi za delo s števili. Oglejmo si primer izrazov Angular.JS s številkami.

V tem primeru želimo prikazati preprosto množenje dveh številskih spremenljivk, imenovanih marža in dobiček, in prikazati njihovo pomnoženo vrednost.

Event Registration

Guru99 Global Event


Total profit margin{{margin*profit}}

Razlaga kode:

  1. Direktiva ng-init se v angular.js uporablja za definiranje spremenljivk in njihovih ustreznih vrednosti v samem pogledu. To je podobno opredelitvi lokalnih spremenljivk za kodiranje v katerem koli programskem jeziku. V tem primeru definiramo dve spremenljivki, imenovani marža in dobiček, in jim dodelimo vrednosti.
  2. Nato uporabimo 2 lokalni spremenljivki in pomnožimo njihove vrednosti.

Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.

Izhod:

Iz rezultata,

  • Jasno je razvidno, da pride do množenja 2 števil 2 in 200 in prikazana je pomnožena vrednost 400.

Nizov AngularJS

Izrazi se lahko uporabljajo tudi za delo z nizi. Oglejmo si primer kotnih izrazov JS z nizi.

V tem primeru bomo definirali 2 niza "firstName" in "lastName" in jih prikazali z uporabo izrazov.

Event Registration

Guru99 Global Event


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

Razlaga kode:

  1. Uporablja se direktiva ng-init, definirajte spremenljivke firstName z vrednostjo "Guru" in spremenljivko lastName z vrednostjo "99".
  2. Nato z izrazoma {{firstName}} in {{lastName}} dostopamo do vrednosti teh spremenljivk in jih ustrezno prikažemo v pogledu.

Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.

Izhod:

Iz izhoda je jasno razvidno, da sta vrednosti firstName in lastName prikazani na zaslonu.

Predmeti Angular.JS

Izrazi se lahko uporabljajo tudi za delo z objekti JavaScript.

Oglejmo si primer izrazov Angular.JS z objekti javascript. Objekt javascript je sestavljen iz para ime-vrednost.

Spodaj je primer sintakse predmeta javascript.

Sintaksa:

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

V tem primeru bomo en objekt opredelili kot objekt osebe, ki bo imel dva para ključev "firstName" in "lastName".

Event Registration

Guru99 Global Event


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

Razlaga kode:

  1. Direktiva ng-init se uporablja za določanje osebe predmeta, ki ima nato pare ključev vrednosti firstName z vrednostjo "Guru" in spremenljivko lastName z vrednostjo "99".
  2. Nato uporabljamo izraza {{person.firstName}} in {{person.secondName}}, da dostopamo do vrednosti teh spremenljivk in jih ustrezno prikažemo v pogledu. Ker so dejanske članske spremenljivke del predmeta osebe, morajo do njih dostopati z zapisom pika (.), Da dostopajo do njihove dejanske vrednosti.

Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.

Izhod:

Iz rezultata,

  • Jasno je razvidno, da sta vrednosti "firstName" in "secondName" prikazani na zaslonu.

Polja AngularJS

Izrazi se lahko uporabljajo tudi za delo z nizi. Oglejmo si primer kotnih izrazov JS z nizi.

V tem primeru bomo opredelili matriko, ki bo vsebovala ocene študenta pri treh predmetih. V pogledu bomo ustrezno prikazali vrednost teh oznak.

Event Registration

Guru99 Global Event


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

Razlaga kode:

  1. Uporablja se direktiva ng-init, definirajte matriko z imenom "marks" s 3 vrednostmi 1, 15 in 19.
  2. Nato uporabljamo izraze oznak [indeks] za dostop do vsakega elementa polja.

Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.

Izhod:

Iz izhoda je jasno razvidno, da so prikazane oznake, ki so definirane v matriki.

Zmogljivosti in omejitve izražanja AngularJS

Angular.JS Izrazne zmogljivosti

  1. Kotni izrazi so podobni izrazom JavaScript. Zato ima enako moč in prilagodljivost.
  2. Ko poskušate oceniti nedefinirane lastnosti v JavaScript, ustvari referenčno napako ali napako tipa. V Angular je vrednotenje izraza odpuščanje in ustvarja nedefinirano ali nično.
  3. Za izračun podatkov pred prikazom lahko uporabimo filtre znotraj izrazov.

Omejitve kotnega izraza JS

  1. Trenutno ni na voljo uporabe pogojnih pogojev, zank ali izjem v kotnem izrazu
  2. Funkcije v Angular izrazu ne morete prijaviti niti v direktivi ng-init.
  3. V kotnem izrazu ni mogoče ustvariti regularnih izrazov. Regularni izraz je kombinacija simbolov in znakov, ki se uporabljajo za iskanje nizov, kot je. * \. Txt $. Takšnih izrazov ni mogoče uporabiti znotraj izrazov Angular JS.
  4. Prav tako ni mogoče uporabiti ali razveljaviti v kotnem izrazu.

Razlika med izrazom in $ eval

Funkcija $ eval omogoča ovrednotenje izrazov znotraj samega krmilnika. Torej, medtem ko se izrazi uporabljajo za ocenjevanje v pogledu, se $ eval uporablja v funkciji krmilnika.

Oglejmo si preprost primer o tem.

V tem primeru

S funkcijo $ eval bomo samo dodali dve številki in jo dali na voljo v predmetu obsega, da bo lahko prikazana v pogledu.

Event Registration


Guru99 Global Event

{{value}}

Razlaga kode:

  1. Najprej definiramo dve spremenljivki 'a' in 'b', od katerih ima vsaka vrednost 1.
  2. Za ovrednotenje dodajanja 2 spremenljivk in dodelitev spremenljivki obsega 'value' uporabljamo funkcijo $ scope. $ Eval.
  3. Nato v pogledu samo prikažemo vrednost spremenljivke 'value'.

Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.

Izhod:

Zgornji izhod prikazuje izhod izraza, ki je bil ovrednoten v krmilniku. Zgornji rezultati kažejo, da je bil izraz $ eval uporabljen za dodajanje 2 spremenljivk obsega 'a in b' z rezultatom, poslanim in prikazanim v pogledu.

Povzetek:

  • Videli smo, kako lahko izraze v Angular JS uporabimo za ovrednotenje običajnih izrazov, kot so izrazi, kot je preprosto seštevanje števil.
  • Direktivo ng-init lahko uporabite za določanje spremenljivk v vrstici, ki jih lahko uporabite v pogledu.
  • Izrazi se lahko uporabljajo za uporabo s primitivnimi vrstami, kot so nizi in številke.
  • Izrazi se lahko uporabljajo tudi za delo z drugimi vrstami, kot so predmeti in nizi JavaScript.
  • Izrazi v Angular JS imajo nekaj omejitev, na primer, da nimajo regularnih izrazov ali da uporabljajo funkcije, zanke ali pogojne stavke.