AngularJS-uttryck: ARRAY, Objekt, $eval, Strings [Exempel]
James Hartman
Vad är Angular JS Expressions?
Uttryck är variabler som definierades i de dubbla klammerparenteserna {{ }}. De är mycket vanliga inom Angular JS, och du skulle se dem i våra tidigare handledningar.
Förklara Angular.js-uttryck med ett exempel
AngularJS-uttryck är de som är skrivna inom dubbla klammerparenteser {{expression}}.
Syntax:
Ett enkelt exempel på ett uttryck är {{5 + 6}}.
Angular.JS-uttryck används för att binda data till HTML på samma sätt som ng-bind-direktivet. AngularJS visar data exakt på den plats där uttrycket är placerat.
Låt oss titta på ett exempel på Angular.JS-uttryck.
I det här exemplet vill vi bara visa en enkel addition av tal som ett uttryck.
<!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 Förklaring:
- ng-app-direktivet i vårt exempel är tomt som visas i skärmdumpen ovan. Detta betyder bara att det inte finns någon modul att tilldela styrenheter, direktiv, tjänster kopplade till koden.
- Vi lägger till ett enkelt uttryck som tittar på tillägg av 2 siffror.
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion:
Från utgången,
- Det kan ses att tillägget av de två siffrorna 9 och 6 sker och tilläggsvärdet 15 visas.
Angular.JS Numbers
Uttryck kan också användas för att arbeta med siffror. Låt oss titta på ett exempel på Angular.JS-uttryck med siffror.
I det här exemplet vill vi bara visa en enkel multiplikation av 2 talvariabler som kallas marginal och vinst och visa deras multiplicerade värde.
<!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 Förklaring:
- Direktivet ng-init används i angular.js för att definiera variabler och deras motsvarande värden i själva vyn. Det är ungefär som att definiera lokala variabler att koda i någon programmeringsspråk. I det här fallet definierar vi två variabler som kallas marginal och vinst och tilldelar dem värden.
- Vi använder sedan de två lokala variablerna och multiplicerar deras värden.
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion:
Från utgången,
- Det kan tydligt ses att multiplikationen av de 2 talen 2 och 200 äger rum, och det multiplicerade värdet 400 visas.
AngularJS Strings
Uttryck kan också användas för att arbeta med strängar. Låt oss titta på ett exempel på Angular JS-uttryck med strängar.
I det här exemplet kommer vi att definiera 2 strängar av "förnamn" och "efternamn" och visa dem med hjälp av uttryck i enlighet med detta.
<!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 Förklaring:
- Direktivet ng-init används för att definiera variablerna firstName med värdet "Guru” och variabeln efternamn med värdet ”99”.
- Vi använder sedan uttryck för {{firstName}} och {{efternamn}} för att komma åt värdet på dessa variabler och visa dem i vyn därefter.
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion:
Från utgången kan det tydligt ses att värdena för förnamn och efternamn visas på skärmen.
Angular.JS Objekt
Uttryck kan användas att arbeta med JavaScript föremål också.
Låt oss titta på ett exempel på Angular.JS-uttryck med javascript-objekt. Ett javascript-objekt består av ett namn-värde-par.
Nedan är ett exempel på syntaxen för ett javascript-objekt.
Syntax:
var car = {type:"Ford", model:"Explorer", color:"White"};
I det här exemplet kommer vi att definiera ett objekt som ett personobjekt som kommer att ha två nyckelvärdespar "firstName" och "efternamn".
<!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 Förklaring:
- Direktivet ng-init används för att definiera objektet person, vilket i sin tur har nyckelvärdespar för firstName med värdet "Guru” och variabeln efternamn med värdet ”99”.
- Vi använder sedan uttryck för {{person.firstName}} och {{person.secondName}} för att komma åt värdet på dessa variabler och visa dem i vyn i enlighet därmed. Eftersom de faktiska medlemsvariablerna är en del av objektpersonen måste de komma åt den med punktnotationen (.) för att komma åt deras faktiska värde.
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion:
Från utgången,
- Det kan tydligt ses att värdena för "firstName" och "secondName" visas på skärmen.
AngularJS-arrayer
Uttryck kan också användas för att arbeta med arrayer. Låt oss titta på ett exempel på Angular JS-uttryck med arrayer.
I det här exemplet kommer vi att definiera en array som kommer att innehålla betygen för en elev i 3 ämnen. I vyn kommer vi att visa värdet på dessa märken i enlighet med detta.
<!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 Förklaring:
- Direktivet ng-init används definiera arrayen med namnet "marks" med 3 värden på 1, 15 och 19.
- Vi använder sedan uttryck av märken [index] för att komma åt varje element i arrayen.
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion:
Från utgången kan det tydligt ses att de markeringar som visas, som är definierade i arrayen.
AngularJS-uttrycksmöjligheter och begränsningar
Angular.JS uttrycksmöjligheter
- Vinkeluttryck är som JavaManusuttryck. Därför har den samma kraft och flexibilitet.
- In JavaSkript, när du försöker utvärdera odefinierade egenskaper genererar det ett ReferenceError eller TypeError. I Angular är uttrycksutvärdering förlåtande och genererar en odefinierad eller noll.
- Man kan använda filter i uttryck för att formatera data innan de visas.
Angular JS Expressions begränsningar
- Det finns för närvarande ingen möjlighet att använda villkor, loopar eller undantag i ett vinkeluttryck
- Du kan inte deklarera funktioner i ett Angular-uttryck, inte ens inuti ng-init-direktivet.
- Man kan inte skapa reguljära uttryck i ett Angular uttryck. Ett reguljärt uttryck är en kombination av symboler och tecken, som används för att hitta för strängar som .*\.txt$. Sådana uttryck kan inte användas inom Angular JS-uttryck.
- Man kan inte heller använda, eller ogiltigförklara, i ett kantigt uttryck.
Skillnaden mellan expression och $eval
$eval-funktionen låter en utvärdera uttryck inifrån själva styrenheten. Så medan uttryck används för utvärdering i vyn, används $eval i kontrollerfunktionen.
Låt oss titta på ett enkelt exempel på detta.
I detta exempel,
Vi kommer bara att använda $eval-funktionen för att lägga till 2 nummer och göra det tillgängligt i scope-objektet så att det kan visas i vyn.
<!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 Förklaring:
- Vi definierar först två variabler 'a' och 'b', som var och en har ett värde på 2.
- Vi använder $scope.$eval-funktionen för att utvärdera tillägget av de 2 variablerna och tilldela det till omfångsvariabeln 'värde'.
- Vi visar då bara värdet på variabeln 'värde' i vyn.
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion:
Ovanstående utdata visar utdata från uttrycket som utvärderades i styrenhet. Resultaten ovan visar att uttrycket $eval användes för att utföra tillägget av de två omfångsvariablerna 'a och b' med resultatet skickat och visat i vyn.
Sammanfattning
- Vi har sett hur uttryck i Vinkelformig JS kan användas för att utvärdera regelbundna JavaSkriptliknande uttryck som enkel addition av siffror.
- Direktivet ng-init kan användas för att definiera variabler in-line som kan användas i vyn.
- Uttryck kan fås att fungera med primitiva typer som strängar och tal.
- Uttryck kan även användas för att arbeta med andra typer som t.ex JavaSkriptobjekt och arrayer.
- Uttryck i Angular JS har några begränsningar som till exempel att inte ha reguljära uttryck eller använda funktioner, loopar eller villkorliga uttalanden.
