AngularJS-expressies: ARRAY, Objects, $ eval, Strings (voorbeelden)

Inhoudsopgave:

Anonim

Wat zijn Angular JS-expressies?

Uitdrukkingen zijn variabelen die zijn gedefinieerd in de dubbele accolades {{}}. Ze worden heel vaak gebruikt binnen Angular JS, en je zou ze zien in onze vorige tutorials.

In deze tutorial leer je-

  • Leg Angular.js-expressies uit met een voorbeeld
  • AngularJS-nummers
  • AngularJS-snaren
  • AngularJS-objecten
  • AngularJS-arrays
  • AngularJS Expression-mogelijkheden en beperkingen
  • Het verschil tussen uitdrukkingen en $ eval

Leg Angular.js-expressies uit met een voorbeeld

AngularJS-expressies zijn die tussen dubbele accolades {{expression}}.

Syntaxis:

Een eenvoudig voorbeeld van een uitdrukking is {{5 + 6}}.

Angular.JS-expressies worden gebruikt om gegevens op dezelfde manier aan HTML te binden als de ng-bind-instructie. AngularJS geeft de gegevens precies weer op de plaats waar de uitdrukking is geplaatst.

Laten we eens kijken naar een voorbeeld van Angular.JS-expressies.

In dit voorbeeld willen we alleen een simpele optelling van getallen als uitdrukking laten zien.

Event Registration

Guru99 Global Event


Addition : {{6+9}}

Code Verklaring:

  1. De ng-app-richtlijn in ons voorbeeld is leeg, zoals weergegeven in de bovenstaande schermafbeelding. Dit betekent alleen dat er geen module is om controllers, richtlijnen, services aan de code toe te wijzen.
  2. We voegen een eenvoudige uitdrukking toe die kijkt naar de toevoeging van 2 getallen.

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

Van de output,

  • Te zien is dat de optelling van de twee nummers 9 en 6 plaatsvindt en de meerwaarde van 15 wordt weergegeven.

Angular.JS-nummers

Uitdrukkingen kunnen ook worden gebruikt om met getallen te werken. Laten we eens kijken naar een voorbeeld van Angular.JS-expressies met getallen.

In dit voorbeeld willen we een eenvoudige vermenigvuldiging van 2 numerieke variabelen laten zien, marge en winst genoemd, en hun vermenigvuldigde waarde weergeven.

Event Registration

Guru99 Global Event


Total profit margin{{margin*profit}}

Code Verklaring:

  1. De instructie ng-init wordt gebruikt in angular.js om variabelen en hun overeenkomstige waarden in de weergave zelf te definiëren. Het lijkt een beetje op het definiëren van lokale variabelen om in elke programmeertaal te coderen. In dit geval definiëren we 2 variabelen, marge en winst genaamd, en kennen we hier waarden aan toe.
  2. We gebruiken dan de 2 lokale variabelen en vermenigvuldigen hun waarden.

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

Van de output,

  • Het is duidelijk te zien dat de vermenigvuldiging van de 2 getallen 2 en 200 plaatsvindt, en de vermenigvuldigde waarde van 400 wordt weergegeven.

AngularJS-snaren

Expressies kunnen ook worden gebruikt om met strings te werken. Laten we eens kijken naar een voorbeeld van Angular JS-expressies met strings.

In dit voorbeeld gaan we 2 strings van "voornaam" en "achternaam" definiëren en ze weergeven met dienovereenkomstige uitdrukkingen.

Event Registration

Guru99 Global Event


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

Code Verklaring:

  1. De ng-init instructie wordt gebruikt om de variabelen firstName te definiëren met de waarde "Guru" en de variabele lastName met de waarde "99".
  2. We gebruiken dan uitdrukkingen van {{firstName}} en {{lastName}} om toegang te krijgen tot de waarde van deze variabelen en ze dienovereenkomstig in de weergave weer te geven.

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

Uit de uitvoer is duidelijk te zien dat de waarden van voornaam en achternaam op het scherm worden weergegeven.

Angular.JS-objecten

Expressies kunnen ook worden gebruikt om met JavaScript-objecten te werken.

Laten we eens kijken naar een voorbeeld van Angular.JS-expressies met JavaScript-objecten. Een javascript-object bestaat uit een naam-waarde-paar.

Hieronder ziet u een voorbeeld van de syntaxis van een javascript-object.

Syntaxis:

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

In dit voorbeeld gaan we een object definiëren als een persoonsobject dat twee sleutelwaardeparen heeft: "voornaam" en "achternaam".

Event Registration

Guru99 Global Event


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

Code Verklaring:

  1. De instructie ng-init wordt gebruikt om de object-persoon te definiëren die op zijn beurt sleutelwaardeparen firstName heeft met de waarde "Guru" en de variabele lastName met de waarde "99".
  2. We gebruiken dan uitdrukkingen van {{person.firstName}} en {{person.secondName}} om toegang te krijgen tot de waarde van deze variabelen en ze dienovereenkomstig in de weergave weer te geven. Omdat de feitelijke lidvariabelen deel uitmaken van de objectpersoon, moeten ze deze openen met de punt (.) -Notatie om toegang te krijgen tot hun werkelijke waarde.

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

Van de output,

  • Het is duidelijk te zien dat de waarden van "firstName" en "secondName" op het scherm worden weergegeven.

AngularJS-arrays

Expressies kunnen ook worden gebruikt om met arrays te werken. Laten we eens kijken naar een voorbeeld van Angular JS-expressies met arrays.

In dit voorbeeld gaan we een array definiëren die de cijfers van een student in 3 vakken zal bevatten. In de weergave zullen we de waarde van deze markeringen dienovereenkomstig weergeven.

Event Registration

Guru99 Global Event


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

Code Verklaring:

  1. De ng-init richtlijn wordt gebruikt om de array te definiëren met de naam "marks" met 3 waarden van 1, 15 en 19.
  2. We gebruiken dan uitdrukkingen van markeringen [index] om toegang te krijgen tot elk element van de array.

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

Uit de uitvoer is duidelijk te zien dat de tekens die worden weergegeven, zijn gedefinieerd in de array.

AngularJS Expression-mogelijkheden en beperkingen

Angular.JS Expression-mogelijkheden

  1. Hoekige uitdrukkingen zijn als JavaScript-uitdrukkingen. Daarom heeft het dezelfde kracht en flexibiliteit.
  2. Wanneer u in JavaScript ongedefinieerde eigenschappen probeert te evalueren, wordt een ReferenceError of TypeError gegenereerd. In Angular is de evaluatie van uitdrukkingen vergevingsgezind en genereert ze een ongedefinieerd of nul.
  3. Men kan filters binnen uitdrukkingen gebruiken om gegevens op te maken voordat ze worden weergegeven.

Angular JS Expression-beperkingen

  1. Er is momenteel geen beschikbaarheid om conditionals, loops of uitzonderingen te gebruiken in een Angular-expressie
  2. U kunt geen functies declareren in een Angular-uitdrukking, zelfs niet binnen de ng-init-richtlijn.
  3. Men kan geen reguliere expressies maken in een Angular-expressie. Een reguliere expressie is een combinatie van symbolen en tekens, die worden gebruikt om te zoeken naar tekenreeksen zoals. * \. Txt $. Dergelijke uitdrukkingen kunnen niet worden gebruikt binnen Angular JS-uitdrukkingen.
  4. Ook kan men geen Angular-uitdrukking gebruiken of ongeldig maken.

Verschil tussen expressie en $ eval

De $ eval-functie stelt iemand in staat expressies vanuit de controller zelf te evalueren. Dus hoewel uitdrukkingen worden gebruikt voor evaluatie in de weergave, wordt $ eval gebruikt in de controllerfunctie.

Laten we hier een eenvoudig voorbeeld van bekijken.

In dit voorbeeld

We gaan gewoon de $ eval-functie gebruiken om 2 getallen toe te voegen en deze beschikbaar te maken in het scope-object, zodat het in de weergave kan worden weergegeven.

Event Registration


Guru99 Global Event

{{value}}

Code Verklaring:

  1. We definiëren eerst 2 variabelen 'a' en 'b', elk met een waarde van 1.
  2. We gebruiken de functie $ scope. $ Eval om de toevoeging van de 2 variabelen te evalueren en deze toe te wijzen aan de bereikvariabele 'waarde'.
  3. We tonen dan alleen de waarde van de variabele 'waarde' in de weergave.

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

De bovenstaande uitvoer toont de uitvoer van de uitdrukking die in de controller is geëvalueerd. De bovenstaande resultaten laten zien dat de $ eval-uitdrukking werd gebruikt om de toevoeging van de 2 bereikvariabelen 'a en b' uit te voeren, waarbij het resultaat werd verzonden en weergegeven in de weergave.

Overzicht:

  • We hebben gezien hoe expressies in Angular JS kunnen worden gebruikt om reguliere JavaScript-achtige expressies te evalueren, zoals het eenvoudig toevoegen van getallen.
  • De richtlijn ng-init kan worden gebruikt om variabelen in-line te definiëren die in de weergave kunnen worden gebruikt.
  • Er kunnen uitdrukkingen worden gemaakt om met primitieve typen te werken, zoals tekenreeksen en getallen.
  • Expressies kunnen ook worden gebruikt om met andere typen te werken, zoals JavaScript-objecten en arrays.
  • Expressies in Angular JS hebben een paar beperkingen, zoals bijvoorbeeld het niet hebben van reguliere expressies of het gebruik van functies, loops of voorwaardelijke statements.