AngularJS-lausekkeet: ARRAY, Objects, $ eval, Strings (Esimerkkejä)

Mikä on kulmikas JS-lauseke?

Lausekkeet ovat muuttujia, jotka määritettiin kaksoissulkeissa {{}}. Niitä käytetään hyvin yleisesti Angular JS: ssä, ja näet ne aiemmissa opetusohjelmissamme.

Tässä opetusohjelmassa opit-

• Selitä Angular.js-lausekkeet esimerkillä
• Kulmaiset JS-numerot
• KulmaJS-kielet
• Kulmaiset JS-objektit
• Kulmaiset JS-taulukot
• AngularJS Expression -ominaisuudet ja rajoitukset
• Ero lausekkeiden ja $ eval välillä

Selitä Angular.js-lausekkeet esimerkillä

Kulmaiset JS-lausekkeet ovat ne, jotka on kirjoitettu kaksoisoljen {{expression}} sisään.

Syntaksi:

Yksinkertainen esimerkki lausekkeesta on {{5 + 6}}.

Angular.JS-lausekkeita käytetään tietojen sitomiseen HTML-koodiin samalla tavalla kuin ng-bind -direktiivi. AngularJS näyttää tiedot tarkalleen lausekkeen sijoituspaikassa.

Katsotaanpa esimerkkiä Angular.JS-lausekkeista.

Tässä esimerkissä haluamme vain näyttää yksinkertaisen numeroiden lisäyksen lausekkeena.

Guru99 Global Event
Addition : {{6+9}}

Koodin selitys:

1. Esimerkissämme oleva ng-app-direktiivi on tyhjä, kuten yllä olevassa kuvakaappauksessa näkyy. Tämä tarkoittaa vain, että koodiin liitettyjä ohjaimia, direktiivejä ja palveluja ei ole moduulissa.
2. Lisäämme yksinkertaisen lausekkeen, joka tarkastelee kahden numeron lisäämistä.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.

Tuotos:

Lähdöstä

• Voidaan nähdä, että kahden numeron 9 ja 6 summaaminen tapahtuu ja lisäarvo 15 näytetään.

Kulmikas. JS-numerot

Lausekkeita voidaan käyttää myös numeroiden kanssa työskentelyyn. Katsotaanpa esimerkkiä Angular.JS-lausekkeista.

Tässä esimerkissä haluamme vain näyttää yksinkertaisen kertomisen kahdesta numeromuuttujasta, joita kutsutaan marginaaliksi ja voitoksi, ja näytetään niiden kerrottu arvo.

Guru99 Global Event
Total profit margin{{margin*profit}}

Koodin selitys:

1. Ng-init-direktiiviä käytetään Angular.js-tiedostossa muuttujien ja niitä vastaavien arvojen määrittelemiseen itse näkymässä. Se on vähän kuin paikallisten muuttujien määrittäminen koodaamaan millä tahansa ohjelmointikielellä. Tässä tapauksessa määritämme 2 muuttujaa, joita kutsutaan marginaaliksi ja voitoksi, ja määritämme niille arvot.
2. Käytämme sitten kahta paikallista muuttujaa ja kerrotaan niiden arvot.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.

Tuotos:

Lähdöstä

• Voidaan selvästi nähdä, että kahden numeron 2 ja 200 kertolasku tapahtuu ja kerrottu arvo 400 näytetään.

KulmaJS-kielet

Lausekkeita voidaan käyttää myös merkkijonojen kanssa työskentelyyn. Katsotaanpa esimerkkiä kulmallisista JS-lausekkeista.

Tässä esimerkissä aiomme määritellä kaksi merkkijonoa "etunimi" ja "sukunimi" ja näyttää ne vastaavasti lausekkeilla.

Guru99 Global Event
   First Name : {{firstName}}
   last Name : {{lastName}}

Koodin selitys:

1. Ng-init-direktiivillä määritetään muuttujat firstName arvolla "Guru" ja muuttuja lastName arvolla "99".
2. Sitten käytämme lausekkeita {{firstName}} ja {{lastName}} pääsemään näiden muuttujien arvoon ja näyttämään ne näkymässä vastaavasti.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.

Tuotos:

Lähdöstä voidaan selvästi nähdä, että etunimen ja sukunimen arvot näytetään näytöllä.

Kulmaiset JS-objektit

Lausekkeita voidaan käyttää myös JavaScript-objektien kanssa.

Katsotaanpa esimerkkiä Angular.JS-lausekkeista javascript-objekteilla. Javascript-objekti koostuu nimi-arvo-parista.

Alla on esimerkki javascript-objektin syntaksista.

Syntaksi:

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

Tässä esimerkissä aiomme määritellä yhden objektin henkilöobjektiksi, jolla on kaksi avainarvoparia "etunimi" ja "sukunimi".

Guru99 Global Event
   First Name : {{person.firstName}}
   Last Name : {{person.lastName}}

Koodin selitys:

1. Ng-init-käskyä käytetään määrittelemään objektihenkilö, jolla puolestaan ​​on avainarvoparit etunimi arvon "Guru" ja muuttujan sukunimi arvon "99" kanssa.
2. Sitten käytämme lausekkeita {{person.firstName}} ja {{person.secondName}} päästäkseen näiden muuttujien arvoon ja näyttämään ne näkymässä vastaavasti. Koska varsinaiset jäsenmuuttujat ovat osa objektihenkilöä, heidän on käytettävä sitä piste (.) -Merkinnällä päästäkseen todelliseen arvoonsa.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.

Tuotos:

Lähdöstä

• Voidaan selvästi nähdä, että "etunimi" ja "toinen nimi" arvot näytetään näytöllä.

Kulmaiset JS-taulukot

Lausekkeita voidaan käyttää myös matriisien kanssa. Katsotaanpa esimerkkiä kulmallisista JS-lausekkeista, joissa on taulukot.

Tässä esimerkissä aiomme määrittää taulukon, joka pitää sisällään opiskelijan arvosanat kolmessa aiheessa. Näkymässä näytämme näiden merkkien arvon vastaavasti.

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

Koodin selitys:

1. Ng-init-direktiiviä käytetään määrittelemään taulukko nimellä "merkit" 3 arvolla 1, 15 ja 19.
2. Sitten käytämme merkkien [hakemisto] lausekkeita päästäksesi matriisin jokaiseen elementtiin.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.

Tuotos:

Lähdöstä voidaan selvästi nähdä, että näytettävät merkit, jotka on määritelty taulukossa.

AngularJS Expression -ominaisuudet ja rajoitukset

Angular.JS Expression -ominaisuudet

1. Kulmailmaukset ovat kuin JavaScript-lausekkeita. Siksi sillä on sama voima ja joustavuus.
2. Kun yrität arvioida määrittelemättömiä ominaisuuksia JavaScriptissä, se luo ReferenceError- tai TypeError-arvon. Kulmassa lausekearviointi on anteeksiantava ja tuottaa määrittelemättömän tai nollan.
3. Lausekkeiden suodattimilla voidaan muotoilla tietoja ennen niiden näyttämistä.

Kulmaisen JS-lausekkeen rajoitukset

1. Tällä hetkellä ei ole mahdollista käyttää ehdollisia, silmukoita tai poikkeuksia kulma-lausekkeessa
2. Et voi ilmoittaa toimintoja kulma-lausekkeessa, edes ng-init-käskyn sisällä.
3. Ei voida luoda säännöllisiä lausekkeita kulma-lausekkeeseen. Säännöllinen lauseke on yhdistelmä symboleja ja merkkejä, joita käytetään etsimään merkkijonoja, kuten. * \. Txt $. Tällaisia ​​lausekkeita ei voida käyttää Angular JS -lausekkeissa.
4. Myöskään kulma-lauseketta ei voi käyttää tai mitätöidä.

Ero lausekkeen ja $ eval välillä

$ Eval -toiminnon avulla voidaan arvioida lausekkeita itse ohjaimesta. Joten vaikka lausekkeita käytetään arvioinnissa näkymässä, $ eval käytetään ohjaintoiminnossa.

Katsotaanpa yksinkertainen esimerkki tästä.

Tässä esimerkissä

Aiomme vain käyttää $ eval -toimintoa lisätäksesi 2 numeroa ja asettamalla sen saataville laajuusobjektissa, jotta se voidaan näyttää näkymässä.

Guru99 Global Event
{{value}}

Koodin selitys:

1. Määrittelemme ensin kaksi muuttujaa 'a' ja 'b', joilla kummallakin on arvo 1.
2. Käytämme $ scope. $ Eval -funktiota kahden muuttujan lisäämisen arvioimiseen ja sen määrittämiseen laajuusmuuttujaan 'value'.
3. Näytämme sitten vain muuttujan 'arvo' arvon näkymässä.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.

Tuotos:

Yllä oleva lähtö näyttää ohjaimessa arvioidun lausekkeen lähdön. Yllä olevat tulokset osoittavat, että $ eval -lauseketta käytettiin kahden laajuusmuuttujan 'a ja b' lisäämiseen tulos lähetettyinä ja näkymässä.

Yhteenveto:

• Olemme nähneet, kuinka kulmaisen JS: n lausekkeita voidaan käyttää säännöllisten JavaScript-tyyppisten lausekkeiden, kuten numeroiden yksinkertaisen lisäämisen, arvioimiseen.
• Ng-init-direktiivillä voidaan määritellä muuttujat rivissä, joita voidaan käyttää näkymässä.
• Lausekkeet voidaan saada toimimaan primitiivisten tyyppien, kuten merkkijonojen ja numeroiden kanssa.
• Lausekkeita voidaan käyttää myös muiden tyyppien, kuten JavaScript-objektien ja taulukoiden, kanssa työskentelyyn.
• Lausekkeilla kulmallisessa JS: ssä on muutamia rajoituksia, kuten esimerkiksi se, ettei sinulla ole säännöllisiä lausekkeita tai että se käyttää toimintoja, silmukoita tai ehdollisia lauseita.