AngularJS-udtryk: ARRAY, Objekter, $eval, Strings [Eksempler]
James Hartman
Hvad er Angular JS Expressions?
Udtryk er variable, som blev defineret i de dobbelte klammer {{ }}. De er meget almindeligt brugt i Angular JS, og du ville se dem i vores tidligere tutorials.
Forklar Angular.js udtryk med et eksempel
AngularJS-udtryk er dem, der er skrevet inden for dobbelte klammer {{udtryk}}.
Syntaks:
Et simpelt eksempel på et udtryk er {{5 + 6}}.
Angular.JS-udtryk bruges til at binde data til HTML på samme måde som ng-bind-direktivet. AngularJS viser dataene nøjagtigt på det sted, hvor udtrykket er placeret.
Lad os se på et eksempel på Angular.JS-udtryk.
I dette eksempel vil vi blot vise en simpel tilføjelse af tal som et udtryk.
<!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>
Kodeforklaring:
- ng-app-direktivet i vores eksempel er tomt som vist på ovenstående skærmbillede. Dette betyder kun, at der ikke er noget modul til at tildele controllere, direktiver, tjenester knyttet til koden.
- Vi tilføjer et simpelt udtryk, som ser på tilføjelsen af 2 tal.
Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.
Output:
Fra udgangen,
- Det kan ses, at tilføjelsen af de to tal 9 og 6 finder sted, og merværdien på 15 vises.
Angular.JS Numbers
Udtryk kan også bruges til at arbejde med tal. Lad os se på et eksempel på Angular.JS-udtryk med tal.
I dette eksempel vil vi blot vise en simpel multiplikation af 2 talvariable kaldet margin og profit og vist deres multiplicerede værdi.
<!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>
Kodeforklaring:
- ng-init-direktivet bruges i angular.js til at definere variabler og deres tilsvarende værdier i selve visningen. Det er lidt ligesom at definere lokale variabler til at kode i enhver programmeringssprog. I dette tilfælde definerer vi 2 variable kaldet margin og profit og tildeler værdier til dem.
- Vi bruger så de 2 lokale variable og multiplicerer deres værdier.
Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.
Output:
Fra udgangen,
- Det kan tydeligt ses, at multiplikationen af de 2 tal 2 og 200 finder sted, og den gangede værdi af 400 vises.
AngularJS Strings
Udtryk kan også bruges til at arbejde med strenge. Lad os se på et eksempel på Angular JS-udtryk med strenge.
I dette eksempel skal vi definere 2 strenge af "fornavn" og "efternavn" og vise dem ved hjælp af udtryk i overensstemmelse hermed.
<!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>
Kodeforklaring:
- ng-init-direktivet bruges definere variablerne firstName med værdien "Guru" og variablen lastName med værdien "99".
- Vi bruger derefter udtryk for {{firstName}} og {{lastName}} for at få adgang til værdien af disse variabler og vise dem i visningen i overensstemmelse hermed.
Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.
Output:
Fra outputtet kan det tydeligt ses, at værdierne for fornavn og efternavn vises på skærmen.
Angular.JS Objekter
Udtryk kan bruges til at arbejde med JavaScript også genstande.
Lad os se på et eksempel på Angular.JS-udtryk med javascript-objekter. Et javascript-objekt består af et navn-værdi-par.
Nedenfor er et eksempel på syntaksen for et javascript-objekt.
Syntaks:
var car = {type:"Ford", model:"Explorer", color:"White"};
I dette eksempel skal vi definere et objekt som et personobjekt, der vil have 2 nøgleværdipar af "fornavn" og "efternavn".
<!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>
Kodeforklaring:
- ng-init-direktivet bruges til at definere objektpersonen, som igen har nøgleværdipar af fornavn med værdien "Guru" og variablen efternavn med værdien "99".
- Vi bruger derefter udtryk for {{person.firstName}} og {{person.secondName}} for at få adgang til værdien af disse variabler og vise dem i visningen i overensstemmelse hermed. Da de faktiske medlemsvariabler er en del af objektpersonen, skal de få adgang til den med prik (.) for at få adgang til deres faktiske værdi.
Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.
Output:
Fra udgangen,
- Det kan tydeligt ses, at værdierne for "firstName" og "secondName" vises på skærmen.
AngularJS-arrays
Udtryk kan også bruges til at arbejde med arrays. Lad os se på et eksempel på Angular JS-udtryk med arrays.
I dette eksempel skal vi definere et array, som skal indeholde karaktererne for en elev i 3 fag. I visningen vil vi vise værdien af disse mærker i overensstemmelse hermed.
<!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>
Kodeforklaring:
- ng-init-direktivet bruges definere arrayet med navnet "marks" med 3 værdier på 1, 15 og 19.
- Vi bruger derefter udtryk for mærker [indeks] for at få adgang til hvert element i arrayet.
Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.
Output:
Fra outputtet kan det tydeligt ses, at de mærker, der vises, som er defineret i arrayet.
AngularJS-udtryksmuligheder og begrænsninger
Angular.JS-udtryksmuligheder
- Vinkeludtryk er ligesom JavaScript udtryk. Derfor har den samme kraft og fleksibilitet.
- In JavaScript, når du forsøger at evaluere udefinerede egenskaber, genererer det en ReferenceError eller TypeError. I Angular er udtryksevaluering tilgivende og genererer en udefineret eller nul.
- Man kan bruge filtre i udtryk til at formatere data, før de vises.
Angular JS-udtryksbegrænsninger
- Der er i øjeblikket ingen tilgængelighed til at bruge betingelser, sløjfer eller undtagelser i et vinkeludtryk
- Du kan ikke erklære funktioner i et Angular udtryk, selv inde i ng-init-direktivet.
- Man kan ikke skabe regulære udtryk i et Angular udtryk. Et regulært udtryk er en kombination af symboler og tegn, som bruges til at finde for strenge såsom .*\.txt$. Sådanne udtryk kan ikke bruges i Angular JS-udtryk.
- Man kan heller ikke bruge eller annullere i et kantet udtryk.
Forskellen mellem udtryk og $eval
$eval-funktionen giver en mulighed for at evaluere udtryk inde fra selve controlleren. Så mens udtryk bruges til evaluering i visningen, bruges $eval i controllerfunktionen.
Lad os se på et simpelt eksempel på dette.
I dette eksempel
Vi skal bare bruge $eval-funktionen til at tilføje 2 tal og gøre det tilgængeligt i scope-objektet, så 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>
Kodeforklaring:
- Vi definerer først 2 variable 'a' og 'b', der hver har en værdi på 1.
- Vi bruger $scope.$eval-funktionen til at evaluere tilføjelsen af de 2 variable og tildele den til omfangsvariablen 'værdi'.
- Vi viser så bare værdien af variablen 'værdi' i visningen.
Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.
Output:
Ovenstående output viser outputtet af udtrykket, som blev evalueret i controller. Ovenstående resultater viser, at $eval-udtrykket blev brugt til at udføre tilføjelsen af de 2 omfangsvariable 'a og b' med resultatet sendt og vist i visningen.
Resumé
- Vi har set, hvordan udtryk i Vinkel JS kan bruges til at evaluere regelmæssigt JavaScript-lignende udtryk såsom simpel tilføjelse af tal.
- ng-init-direktivet kan bruges til at definere variabler in-line, som kan bruges i visningen.
- Udtryk kan fås til at arbejde med primitive typer som strenge og tal.
- Udtryk kan også bruges til at arbejde med andre typer som f.eks JavaScriptobjekter og arrays.
- Udtryk i Angular JS har nogle få begrænsninger som for eksempel ikke at have regulære udtryk eller bruge funktioner, loops eller betingede sætninger.
