AngularJS-uttrykk: ARRAY, Objects, $ eval, Strings (eksempler)

Innholdsfortegnelse:

Anonim

Hva er Angular JS Expressions?

Uttrykk er variabler som ble definert i doble bukseseler {{}}. De brukes veldig ofte i Angular JS, og du vil se dem i våre tidligere opplæringsprogrammer.

I denne veiledningen vil du lære-

  • Forklar Angular.js-uttrykk med eksempel
  • AngularJS-tall
  • AngularJS strenger
  • AngularJS-objekter
  • AngularJS Arrays
  • AngularJS uttrykk evner og begrensninger
  • Forskjellen mellom uttrykk og $ eval

Forklar Angular.js-uttrykk med et eksempel

AngularJS-uttrykk er de som er skrevet i doble parenteser {{expression}}.

Syntaks:

Et enkelt eksempel på et uttrykk er {{5 + 6}}.

Angular.JS-uttrykk brukes til å binde data til HTML på samme måte som ng-bind-direktivet. AngularJS viser dataene nøyaktig på stedet der uttrykket er plassert.

La oss se på et eksempel på Angular.JS-uttrykk.

I dette eksemplet vil vi bare vise et enkelt tillegg av tall som et uttrykk.

Event Registration

Guru99 Global Event


Addition : {{6+9}}

Kode Forklaring:

  1. Direktivet om ng-app i vårt eksempel er tomt som vist på skjermbildet ovenfor. Dette betyr bare at det ikke er noen modul for å tildele kontrollere, direktiver, tjenester tilknyttet koden.
  2. Vi legger til et enkelt uttrykk som ser på tillegg av to tall.

Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.

Produksjon:

Fra utgangen,

  • Det kan sees at tilføyelsen av de to tallene 9 og 6 finner sted og merverdien på 15 vises.

Angular.JS-tall

Uttrykk kan også brukes til å jobbe med tall. La oss se på et eksempel på Angular.JS-uttrykk med tall.

I dette eksemplet vil vi bare vise en enkel multiplikasjon av to tallvariabler kalt margin og fortjeneste og viste multiplisert verdi.

Event Registration

Guru99 Global Event


Total profit margin{{margin*profit}}

Kode Forklaring:

  1. Direktivet ng-init brukes i angular.js for å definere variabler og deres tilsvarende verdier i selve visningen. Det er litt som å definere lokale variabler for å kode på hvilket som helst programmeringsspråk. I dette tilfellet definerer vi to variabler kalt margin og fortjeneste og tilordner verdier til dem.
  2. Vi bruker da de to lokale variablene og multipliserer verdiene deres.

Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.

Produksjon:

Fra utgangen,

  • Det kan tydelig sees at multiplikasjonen av de 2 tallene 2 og 200 finner sted, og den multipliserte verdien på 400 vises.

AngularJS strenger

Uttrykk kan også brukes til å jobbe med strenger. La oss se på et eksempel på Angular JS-uttrykk med strenger.

I dette eksemplet skal vi definere to strenger med "fornavn" og "etternavn" og vise dem ved hjelp av uttrykk tilsvarende.

Event Registration

Guru99 Global Event


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

Kode Forklaring:

  1. Ng-init-direktivet brukes definerer variablene firstName med verdien "Guru" og variabelen lastName med verdien "99".
  2. Vi bruker deretter uttrykk for {{firstName}} og {{lastName}} for å få tilgang til verdien av disse variablene og vise dem i visningen deretter.

Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.

Produksjon:

Fra utgangen kan det sees tydelig at verdiene for fornavn og etternavn vises på skjermen.

Angular.JS-objekter

Uttrykk kan også brukes til å jobbe med JavaScript-objekter.

La oss se på et eksempel på Angular.JS-uttrykk med javascript-objekter. Et javascript-objekt består av et navn-verdipar.

Nedenfor er et eksempel på syntaksen til et javascript-objekt.

Syntaks:

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

I dette eksemplet skal vi definere ett objekt som et personobjekt som vil ha to nøkkelverdipar av "fornavn" og "etternavn".

Event Registration

Guru99 Global Event


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

Kode Forklaring:

  1. Direktivet ng-init brukes til å definere objektpersonen som igjen har nøkkelverdipar fornavn med verdien "Guru" og variabelen etternavn med verdien "99".
  2. Vi bruker deretter uttrykk for {{person.firstName}} og {{person.secondName}} for å få tilgang til verdien av disse variablene og vise dem i visningen deretter. Siden de faktiske medlemsvariablene er en del av objektpersonen, må de få tilgang til den med punktum (.) For å få tilgang til deres faktiske verdi.

Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.

Produksjon:

Fra utgangen,

  • Det kan sees tydelig at verdiene til "firstName" og "secondName" vises på skjermen.

AngularJS Arrays

Uttrykk kan også brukes til å jobbe med matriser. La oss se på et eksempel på Angular JS-uttrykk med matriser.

I dette eksemplet skal vi definere en matrise som skal holde karakterene til en student i 3 fag. I visningen vil vi vise verdien av disse merkene tilsvarende.

Event Registration

Guru99 Global Event


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

Kode Forklaring:

  1. Direktivet ng-init brukes definere matrisen med navnet "merker" med 3 verdier på 1, 15 og 19.
  2. Vi bruker deretter uttrykk for merker [indeks] for å få tilgang til hvert element i matrisen.

Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.

Produksjon:

Fra utgangen kan det sees tydelig at merkene som vises, er definert i matrisen.

AngularJS uttrykk evner og begrensninger

Angular.JS uttrykk evner

  1. Vinkeluttrykk er som JavaScript-uttrykk. Derfor har den samme kraft og fleksibilitet.
  2. Når du prøver å evaluere udefinerte egenskaper i JavaScript, genererer det en ReferenceError eller TypeError i JavaScript. I Angular er uttrykksevaluering tilgivende og genererer en udefinert eller null.
  3. Man kan bruke filtre i uttrykk for å formatere data før de vises.

Vinkel JS uttrykk begrensninger

  1. Det er foreløpig ingen tilgjengelighet for å bruke betingede, løkker eller unntak i et vinkeluttrykk
  2. Du kan ikke erklære funksjoner i et vinkeluttrykk, selv ikke i ng-init-direktivet.
  3. Man kan ikke lage regulære uttrykk i et vinkeluttrykk. Et vanlig uttrykk er en kombinasjon av symboler og tegn, som brukes til å finne for strenger som. * \. Txt $. Slike uttrykk kan ikke brukes i Angular JS-uttrykk.
  4. Man kan heller ikke bruke, eller ugyldiggjøre et vinkeluttrykk.

Forskjellen mellom uttrykk og $ eval

$ Eval-funksjonen lar en evaluere uttrykk fra selve kontrolleren. Så mens uttrykk brukes til evaluering i visningen, brukes $ eval i kontrollerfunksjonen.

La oss se på et enkelt eksempel på dette.

I dette eksemplet,

Vi skal bare bruke $ eval-funksjonen til å legge til 2 tall og gjøre den tilgjengelig i omfangsobjektet slik at den kan vises i visningen.

Event Registration


Guru99 Global Event

{{value}}

Kode Forklaring:

  1. Vi definerer først to variabler 'a' og 'b', som hver har verdien 1.
  2. Vi bruker $ scope. $ Eval-funksjonen til å evaluere tillegg av de to variablene og tildele den til omfangsvariabelen 'verdi'.
  3. Vi viser da bare verdien av variabelen 'verdi' i visningen.

Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.

Produksjon:

Ovennevnte utgang viser utdataene til uttrykket som ble evaluert i kontrolleren. Ovennevnte resultater viser at $ eval-uttrykket ble brukt til å utføre tillegg av de to omfangsvariablene 'a og b' med resultatet sendt og vist i visningen.

Sammendrag:

  • Vi har sett hvordan uttrykk i Angular JS kan brukes til å evaluere vanlige JavaScript-lignende uttrykk, som for eksempel enkelt tillegg av tall.
  • Direktivet om ng-init kan brukes til å definere variabler in-line som kan brukes i visningen.
  • Uttrykk kan gjøres for å fungere med primitive typer som strenger og tall.
  • Uttrykk kan også brukes til å jobbe med andre typer som JavaScript-objekter og matriser.
  • Uttrykk i Angular JS har noen få begrensninger som for eksempel å ikke ha vanlige uttrykk eller bruke funksjoner, sløyfer eller betingede utsagn.