AngularJS-uttrykk: ARRAY, Objects, $eval, Strings [Eksempler]
James Hartman
Hva er Angular JS Expressions?
Uttrykk er variabler som ble definert i de doble klammeparentesene {{ }}. De er veldig ofte brukt i Angular JS, og du vil se dem i våre tidligere opplæringsprogrammer.
Forklar Angular.js-uttrykk med et eksempel
AngularJS-uttrykk er de som er skrevet innenfor doble klammeparenteser {{uttrykk}}.
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 ønsker vi bare å vise et enkelt tillegg av tall som et uttrykk.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="">
Addition : {{6+9}}
</div>
</body>
</html>
Code Forklaring:
- ng-app-direktivet i vårt eksempel er tomt som vist på skjermbildet ovenfor. Dette betyr bare at det ikke er noen modul for å tilordne kontrollere, direktiver, tjenester knyttet til koden.
- Vi legger til et enkelt uttrykk som ser på addisjon av 2 tall.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Utgang:
Fra utgangen,
- Det kan sees at addisjonen av de to tallene 9 og 6 finner sted og tilleggsverdien 15 vises.
Vinklet.JS Numbers
Uttrykk kan også brukes til å jobbe med tall. La oss se på et eksempel på Angular.JS-uttrykk med tall.
I dette eksemplet ønsker vi bare å vise en enkel multiplikasjon av 2 tallvariabler kalt margin og profitt og vise deres multipliserte verdi.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="margin=2;profit=200">
Total profit margin
{{margin*profit}}
</div>
</body>
</html>
Code Forklaring:
- ng-init-direktivet brukes i angular.js for å definere variabler og deres tilsvarende verdier i selve visningen. Det er litt som å definere lokale variabler for å kode i noen programmeringsspråk. I dette tilfellet definerer vi 2 variabler kalt margin og fortjeneste og tildeler verdier til dem.
- Vi bruker da de 2 lokale variablene og multipliserer verdiene deres.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Utgang:
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 2 strenger med "fornavn" og "etternavn" og vise dem ved å bruke uttrykk tilsvarende.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="firstName='Guru';lastName='99'">
First Name : {{firstName}}<br>
last Name : {{lastName}}
</div>
</body>
</html>
Code Forklaring:
- ng-init-direktivet brukes til å definere variablene firstName med verdien “Guru" og variabelen etternavn med verdien "99".
- Vi bruker da uttrykk for {{firstName}} og {{lastName}} for å få tilgang til verdien av disse variablene og vise dem i visningen deretter.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Utgang:
Fra utgangen kan det tydelig sees at verdiene til fornavn og etternavn vises på skjermen.
Angular.JS-objekter
Uttrykk kan brukes til å jobbe med JavaScript objekter også.
La oss se på et eksempel på Angular.JS-uttrykk med javascript-objekter. Et javascript-objekt består av et navn-verdi-par.
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 2 nøkkelverdipar av "fornavn" og "etternavn".
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}">
First Name : {{person.firstName}}<br>
Last Name : {{person.lastName}}
</div>
</body>
</html>
Code Forklaring:
- ng-init-direktivet brukes til å definere objektet person, som igjen har nøkkelverdipar for firstName med verdien «Guru" og variabelen etternavn med verdien "99".
- Vi bruker da 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 punktnotasjonen (.) for å få tilgang til den faktiske verdien.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Utgang:
Fra utgangen,
- Det kan tydelig sees at verdiene for "firstName" og "secondName" vises på skjermen.
AngularJS-arrayer
Uttrykk kan også brukes til å arbeide med matriser. La oss se på et eksempel på Angular JS-uttrykk med matriser.
I dette eksemplet skal vi definere en matrise som skal inneholde karakterene til en student i 3 fag. I visningen vil vi vise verdien av disse merkene tilsvarende.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="marks=[1,15,19]">
Student Marks<br>
Subject1 : {{marks[0] }}<br>
Subject2 : {{marks[1] }}<br>
Subject3 : {{marks[2] }}<br>
</div>
</body>
</html>
Code Forklaring:
- ng-init-direktivet brukes definere matrisen med navnet "merker" med 3 verdier på 1, 15 og 19.
- Vi bruker da uttrykk for merker [indeks] for å få tilgang til hvert element i matrisen.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Utgang:
Fra utgangen kan det tydelig sees at merkene som vises, som er definert i matrisen.
AngularJS-uttrykksmuligheter og begrensninger
Angular.JS-uttrykksmuligheter
- Vinkeluttrykk er som JavaManusuttrykk. Derfor har den samme kraft og fleksibilitet.
- In JavaSkript, når du prøver å evaluere udefinerte egenskaper, genererer det en ReferenceError eller TypeError. I Angular er uttrykksevaluering tilgivende og genererer en udefinert eller null.
- Man kan bruke filtre i uttrykk for å formatere data før de vises.
Angular JS-uttrykksbegrensninger
- Det er foreløpig ingen tilgjengelighet for å bruke betingelser, løkker eller unntak i et vinkeluttrykk
- Du kan ikke deklarere funksjoner i et vinkeluttrykk, selv i ng-init-direktivet.
- Man kan ikke lage regulære uttrykk i et Angular uttrykk. Et regulært 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.
- Man kan heller ikke bruke, eller annullere, i et kantete uttrykk.
Forskjellen mellom uttrykk og $eval
$eval-funksjonen lar en evaluere uttrykk fra selve kontrolleren. Så mens uttrykk brukes for 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 det tilgjengelig i scope-objektet slik at det kan vises i visningen.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div ng-app="sampleApp" ng-controller="AngularController">
<h1> Guru99 Global Event</h1>
{{value}}
</div>
<script>
var sampleApp = angular.module('sampleApp',[]);
sampleApp.controller('AngularController',function($scope){
$scope.a=1;
$scope.b=1;
$scope.value=$scope.$eval('a+b');
});
</script>
</body>
</html>
Code Forklaring:
- Vi definerer først to variabler 'a' og 'b', som hver har en verdi på 2.
- Vi bruker funksjonen $scope.$eval for å evaluere tillegget av de 2 variablene og tilordne det til omfangsvariabelen 'verdi'.
- Vi viser da bare verdien til variabelen 'verdi' i visningen.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Utgang:
Ovennevnte utdata viser utdataene til uttrykket som ble evaluert i controller. Resultatene ovenfor viser at $eval-uttrykket ble brukt til å legge til de 2 omfangsvariablene 'a og b' med resultatet sendt og vist i visningen.
Sammendrag
- Vi har sett hvordan uttrykk i Kantete JS kan brukes til å evaluere regelmessig JavaSkriptlignende uttrykk, for eksempel enkel addisjon av tall.
- ng-init-direktivet kan brukes til å definere variabler in-line som kan brukes i visningen.
- Uttrykk kan fås til å fungere med primitive typer som strenger og tall.
- Uttrykk kan også brukes til å jobbe med andre typer som f.eks JavaSkriptobjekter og matriser.
- Uttrykk i Angular JS har noen få begrensninger som for eksempel å ikke ha regulære uttrykk eller bruke funksjoner, looper eller betingede utsagn.
