AngularJS-avaldised: ARRAY, Objects, $ eval, Strings (näited)

Lang L: none (table-of-contents):

Anonim

Mis on nurgelised JS-avaldised?

Avaldised on muutujad, mis määratleti topeltklambrites {{}}. Neid kasutatakse Angular JS-is väga sageli ja näete neid meie eelmistes õpetustes.

Selles õpetuses saate teada

  • Selgitage Angular.js väljendeid näitega
  • NurgelisedJS-numbrid
  • NurgelisedJS stringid
  • NurgaJS objektid
  • NurgaJS massiivid
  • AngularJS-i väljendusvõimalused ja piirangud
  • Avaldiste ja $ eval erinevus

Selgitage Angular.js väljendeid näitega

Nurksed JS-avaldised on need, mis on kirjutatud topeltklambritesse {{expression}}.

Süntaks:

Avaldise lihtne näide on {{5 + 6}}.

Angular.JS-väljendeid kasutatakse andmete HTML-i sidumiseks samamoodi nagu ng-bind-käskkirjaga. AngularJS kuvab andmed täpselt avaldise asetamise kohas.

Vaatame näite Angular.JS avaldistest.

Selles näites tahame lihtsalt avaldisena näidata arvude lihtsat liitmist.

Event Registration

Guru99 Global Event


Addition : {{6+9}}

Koodi selgitus:

  1. Meie näite ng-appi direktiiv on tühi, nagu ülaltoodud ekraanipildil näidatud. See tähendab ainult seda, et koodile lisatud kontrollerite, direktiivide ja teenuste määramiseks puudub moodul.
  2. Lisame lihtsa avaldise, milles vaadeldakse 2 numbri lisamist.

Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

Väljundi põhjal

  • On näha, et kahe numbri 9 ja 6 liitmine toimub ja kuvatakse lisandväärtus 15.

Nurga all. JS numbrid

Avaldisi saab kasutada ka numbritega töötamiseks. Vaatame näite nurkadega.

Selles näites tahame lihtsalt näidata 2 arvmuutuja lihtsat korrutamist, mida nimetatakse marginaaliks ja kasumiks, ning kuvasime nende korrutatud väärtuse.

Event Registration

Guru99 Global Event


Total profit margin{{margin*profit}}

Koodi selgitus:

  1. Ng-init käsku kasutatakse angular.js-s muutujate ja neile vastavate väärtuste määratlemiseks vaates endas. See on mõnevõrra nagu kohalike muutujate määratlemine kodeerimiseks mis tahes programmeerimiskeeles. Sel juhul määratleme 2 muutujat, mida nimetatakse marginaaliks ja kasumiks, ning määrame neile väärtused.
  2. Seejärel kasutame kahte kohalikku muutujat ja korrutame nende väärtused.

Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

Väljundi põhjal

  • On selgelt näha, et 2 numbri 2 ja 200 korrutamine toimub ja kuvatakse korrutatud väärtus 400.

NurgelisedJS stringid

Avaldisi saab kasutada ka stringidega töötamiseks. Vaatame näite stringidega nurgelistest JS-i avaldistest.

Selles näites määratleme kaks stringi "eesnimi" ja "perenimi" ning kuvame need vastavalt avaldisi kasutades.

Event Registration

Guru99 Global Event


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

Koodi selgitus:

  1. Kasutatakse ng-init käsku, et määratleda muutujad eesnimi väärtusega "Guru" ja muutuja perekonnanimi väärtusega "99".
  2. Seejärel kasutame nende muutujate väärtusele juurde pääsemiseks ja nende kuvamiseks vastavalt vaates väljendeid {{firstName}} ja {{lastName}}.

Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

Väljundist on selgelt näha, et ekraanil kuvatakse eesnime ja perekonnanime väärtused.

Nurga.JS objektid

Avaldisi saab kasutada ka JavaScripti objektidega töötamiseks.

Vaatame näite Angular.JS-i avaldistest javascripti objektidega. Javascripti objekt koosneb nime-väärtuse paarist.

Allpool on näide javascripti objekti süntaksist.

Süntaks:

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

Selles näites määratleme ühe objekti isikobjektina, millel on kaks võtmeväärtuste paari "eesnimi" ja "perenimi".

Event Registration

Guru99 Global Event


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

Koodi selgitus:

  1. Käskkirja ng-init kasutatakse objekti isiku määratlemiseks, millel on omakorda võtmeväärtusega paarid eesnimi väärtusega "Guru" ja muutuja perekonnanimi väärtusega "99".
  2. Seejärel kasutame nende muutujate väärtusele juurde pääsemiseks ja nende kuvamiseks vastavalt vaates väljendeid {{person.firstName}} ja {{person.secondName}}. Kuna tegelikud liikmemuutujad on objekti isiku osa, peavad nad oma tegelikule väärtusele pääsemiseks sellele juurde pääsema punktmärkidega (.).

Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

Väljundi põhjal

  • On selgelt näha, et ekraanil kuvatakse väärtused "eesnimi" ja "teine ​​nimi".

NurgaJS massiivid

Avaldisi saab kasutada ka massiividega töötamiseks. Vaatame massiividega nurgeliste JS-i lausete näidet.

Selles näites määratleme massiivi, mis hoiab üliõpilase märke kolmes õppeaines. Vaates kuvame vastavalt nende märkide väärtust.

Event Registration

Guru99 Global Event


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

Koodi selgitus:

  1. Ng-init käsku kasutatakse massiivi määratlemiseks nimega "mark" 3 väärtusega 1, 15 ja 19.
  2. Seejärel kasutame massiivi igale elemendile juurdepääsemiseks märkide [register] väljendeid.

Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

Väljundist on selgelt näha, et massiivis määratletud märgid kuvatakse.

AngularJS-i väljendusvõimalused ja piirangud

Nurga.JS-i väljendusvõimalused

  1. Nurgaväljendid on nagu JavaScripti väljendid. Seega on sellel sama jõud ja paindlikkus.
  2. JavaScriptis määratlemata omaduste hindamisel genereerib see viite ReferenceError või TypeError. Nurgas on avaldise hindamine andestav ja genereerib määratlemata või nullväärtuse.
  3. Enne avaldamist saab andmete vormindamiseks kasutada avaldistes filtreid.

Nurga JS avaldise piirangud

  1. Nurgaväljendis pole praegu tingimisi, tsükleid ega erandeid võimalik kasutada
  2. Nurgaväljendis ei saa funktsioone deklareerida, isegi ng-init direktiivi sees.
  3. Nurkväljendisse ei saa luua regulaaravaldisi. Regulaaravaldus on sümbolite ja märkide kombinatsioon, mida kasutatakse selliste stringide leidmiseks nagu. * \. Txt $. Selliseid väljendeid ei saa kasutada nurk JS-i avaldistes.
  4. Samuti ei saa nurkväljendit kasutada ega tühistada.

Erinevus avaldise ja $ evali vahel

Funktsioon $ eval võimaldab väljendeid hinnata kontrolleri enda seest. Nii et kui vaates kasutatakse hindamiseks väljendeid, kasutatakse kontrolleri funktsioonis $ eval.

Vaatame selle kohta lihtsat näidet.

Selles näites

Kasutame lihtsalt funktsiooni $ eval, et lisada 2 numbrit ja muuta see objekti objektis kättesaadavaks, et seda saaks vaates näidata.

Event Registration


Guru99 Global Event

{{value}}

Koodi selgitus:

  1. Esmalt määratleme 2 muutujat 'a' ja 'b', millel mõlemal on väärtus 1.
  2. Kasutame funktsiooni $ scope. $ Eval, et hinnata kahe muutuja liitmist ja omistada see muutuja väärtusele "value".
  3. Seejärel kuvame vaates lihtsalt muutuja 'value' väärtust.

Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

Ülaltoodud väljund näitab väljendi väljundit, mida kontrolleris hinnati. Ülaltoodud tulemused näitavad, et avaldist $ eval kasutati 2 ulatuse muutuja „a ja b” lisamiseks tulemusega, mis saadeti ja kuvati vaates.

Kokkuvõte:

  • Oleme näinud, kuidas nurk-JS-i väljendeid saab kasutada tavaliste JavaScripti-sarnaste väljendite, näiteks numbrite lihtsa lisamise, hindamiseks.
  • Direktiivi ng-init saab kasutada muutujate määramiseks reas, mida saab vaates kasutada.
  • Avaldisi saab panna tööle primitiivsete tüüpidega nagu stringid ja numbrid.
  • Avaldisi saab kasutada ka muud tüüpi, näiteks JavaScripti objektide ja massiividega töötamiseks.
  • Nurgelise JS-i avaldistel on mõned piirangud, nagu näiteks regulaaravaldiste puudumine või funktsioonide, tsüklite või tingimuslausete kasutamine.