AngularJS-udtryk: Array, objekter, $eval, strenge

Af: James Hartman James Hartman
Hours Opdateret

⚡ Smart opsummering

AngularJS-udtryk er kodefragmenter placeret i dobbelte parenteser, der binder data direkte ind i en skabelon. De evaluerer tal, strenge, objekter og arrays, og funktionen $eval udfører den samme evaluering indefra en controller.

  • 🧩 Bindende syntaks: Double parenteser gengiver en værdi, hvor udtrykket sidder, hvilket giver det samme resultat som ng-bind-direktivet.
  • 🔢 Understøttede typer: Numbers, strenge, JavaScriptobjekter, der tilgås med punktumnotation, og arrays, der tilgås via indeks, evalueres alle korrekt.
  • 🏷️ Inline-variabler: ng-init-direktivet deklarerer view-level variabler, som udtryk derefter kan læse uden en controller.
  • 🛡️ Tilgivende evaluering: Udefinerede egenskaber giver udefineret i stedet for at udløse ReferenceError-plainen JavaScriptet ville hæve.
  • 🚫 Hårde grænser: Løkker, undtagelser, funktionsdeklarationer, regulære udtryk og komma- og void-operatorerne er ikke tilgængelige.
  • 🇧🇷 Controller-evaluering: $scope.$eval evaluerer en udtryksstreng i controllerkode og eksponerer resultatet for viewet.
  • ⚠️ Supportstatus: AngularJS nåede slutningen af ​​sin levetid den 31. december 2021 og modtager ikke yderligere sikkerhedsrettelser.
Læs mere

AngularJS udtryk

Hvad er AngularJS-udtryk?

Udtryk er variabler skrevet i dobbelte parenteser {{ }}De bruges meget ofte i AngularJS og optræder i de tidligere vejledninger i denne serie.

⚠️ Supportmeddelelse: AngularJS nået levetidens afslutning den 31. december 2021 og modtager ingen yderligere programrettelser eller sikkerhedsrettelser. Syntaksen nedenfor forbliver korrekt til vedligeholdelse af eksisterende AngularJS 1.x-applikationer; nye projekter bør bruge moderne Vinkelforskydning, hvor interpolationsparenteser stadig findes, men ng-init og $eval lade være med.

Forklar AngularJS-udtryk med et eksempel

AngularJS-udtryk skrives i dobbelte parenteser, som i {{expression}}.

Syntaks: et simpelt eksempel på et udtryk er {{5 + 6}}.

AngularJS-udtryk binder data til HTML på samme måde som ng-bind-direktivet, og AngularJS viser dataene præcis der, hvor udtrykket er placeret.

I dette eksempel viser vi en simpel addition af tal som et udtryk.

AngularJS udtryk

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="">
        Addition : {{6+9}}
    </div>

</body>
</html>

Code Forklaring:

  1. ng-app-direktivet er tomt, hvilket betyder, at intet modul forsyner controllere, direktivereller tjenester til denne side.
  2. Et simpelt udtryk lægger to tal sammen.

Output:

AngularJS udtryk

Additionen af ​​9 og 6 finder sted, og resultatet, 15, vises.

AngularJS Numbers

Udtryk fungerer med tal. Dette eksempel multiplicerer to talvariabler, margin og profit, og viser produktet.

AngularJS Numbers

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/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:

  1. ng-init-direktivet definerer variabler og deres værdier i selve visningen, ligesom lokale variabler i enhver anden programmeringssprog. Her margin og profit er deklareret og tildelt.
  2. Udtrykket multiplicerer derefter disse to lokale variabler.

Output:

AngularJS Numbers

Multiplikationen af ​​2 og 200 finder sted, og produktet 400 vises.

AngularJS Strings

Udtryk fungerer også med strenge. Dette eksempel definerer firstName og lastName og viser begge.

AngularJS Strings

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/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:

  1. ng-init-direktivet definerer firstName med værdien "Guru"Og lastName med værdien “99”.
  2. Udtrykket {{firstName}} og {{lastName}} læse disse variabler og vise dem i viewet.

Output:

AngularJS Strings

Begge værdier vises på skærmen.

Gå ikke glip af:

AngularJS-objekter

Udtryk fungerer med JavaScript objekter, som består af navn-værdi-par. Syntaksen for en JavaScriptobjektet ser sådan ud:

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

Dette eksempel definerer en person objekt, der indeholder to nøgle-værdi-par, firstName og lastName.

AngularJS-objekter

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/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:

  1. ng-init-direktivet definerer objektet person med nøgle-værdi-parrene firstName indstillet til "Guru"Og lastName indstillet til "99".
  2. Udtrykket {{person.firstName}} og {{person.lastName}} læs disse medlemmer. Fordi de tilhører objektet, kræves punktumnotation for at nå deres værdier.

Output:

AngularJS-objekter

Værdierne for firstName og lastName vises på skærmen.

AngularJS-arrays

Udtryk fungerer med arrays. Dette eksempel definerer et array, der indeholder en elevs karakterer i tre fag, og viser hver værdi.

AngularJS-arrays

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/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]}}
</div>

</body>
</html>

Code Forklaring:

  1. ng-init-direktivet definerer arrayet marks med de tre værdier 1, 15 og 19.
  2. Udtryk af formen marks[index] læs hvert element.

Output:

AngularJS-arrays

De mærker, der er defineret i arrayet, vises.

AngularJS-udtryksmuligheder og begrænsninger

Capabilities

  1. AngularJS-udtryk ligner JavaScriptudtryk deler meget af den samme kraft og fleksibilitet.
  2. Hvor JavaScriptet genererer en ReferenceError eller TypeError på en udefineret egenskab, AngularJS-evalueringen er tilgivende og giver undefined eller null.
  3. Filtre kan anvendes i et udtryk for at formatere data, før de vises.
  4. Den ternære operator understøttes, så {{ isReady ? 'Yes' : 'No' }} er gyldig.

Begrænsninger

  1. Løkker og undtagelseshåndtering kan ikke bruges i et AngularJS-udtryk. Betinget logik er begrænset til den ternære operator; if udsagn er ikke tilgængelige.
  2. Funktioner kan ikke deklareres i et udtryk, ikke engang i en ng-init-direktiv.
  3. Regulære udtryk kan ikke oprettes inde i et udtryk. Et regulært udtryk er en kombination af symboler og tegn, der bruges til at matche strenge, f.eks. .*\.txt$, og sådanne literaler afvises.
  4. Kommaoperatoren (,) og void operatør er ikke tilladt.

ng-bind vs. udtryksbøjler: Hvilke skal man bruge

Double parenteser og ng-bind-direktivet producerer det samme gengivne output, så valget mellem dem virker vilkårligt. Det er det ikke. De to opfører sig forskelligt i øjeblikket, før AngularJS er færdig med at indlæse, og den forskel er synlig for den person, der bruger siden.

Aspect {{ expression }} ng-bind
Skrevet i Elementindhold En elementattribut
Før AngularJS indlæses Rå tandbøjler blinker på skærmen Intet vises
Læsbarhed Højere — værdien ligger inline Lavere — værdien er skjult i en attribut
Flere værdier pr. element Ja Nej, kun én binding
Engangsbinding Ja, med {{::value}} Ja, med ng-bind="::value"

Den korte forekomst af rå parenteser er kendt som "flash of uninterpolated content", og det sker, fordi browseren gengiver markup'en, før AngularJS kompilerer den. Brug ng-bind, eller tilføj ng-cloak-direktivet, for indhold, der er synligt over folden. Parenteser er fortsat det klarere og mere læsbare valg alle andre steder, især hvor flere værdier vises inde i ét element.

Forskellen mellem udtryk og $eval

$eval Funktionen evaluerer udtryk indefra controlleren. Udtryk evaluerer i viewet, hvorimod $eval evalueres i controllerkode.

Dette eksempel bruger $eval at lægge to tal sammen og placere resultatet på oscilloskopobjektet, så visningen kan vise det.

Forskellen mellem udtryk og $eval

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.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:

  1. To omfangsvariabler, a og b, hver har værdien 1.
  2. $scope.$eval evaluerer deres addition og tildeler resultatet til omfangsvariablen value.
  3. Visningen vises derefter value.

Output:

Forskellen mellem udtryk og $eval

Outputtet viser udtrykket, der evalueres indeni controller, med summen af ​​de to omfangsvariabler, der sendes til og vises i visningen.

Ofte Stillede Spørgsmål

At sætte to kolon foran et udtryk, som i {{::name}}, stopper med at overvåge den, når en værdi er fortolket. Dette fjerner overvågeren og sænker omkostningerne ved digest på sider med mange statiske bindinger.

$eval evaluerer en streng øjeblikkeligt mod en rækkevidde. $parse returnerer en genbrugelig funktion til gentagen evaluering. $interpolate håndterer en hel skabelonstreng, der indeholder parenteser, i stedet for et enkelt udtryk.

For det meste. AI Værktøjer beholder parenteser og omskriver filtre som rør, men ng-init-variabler har ingen Angular-ækvivalent og skal flyttes manuelt til en komponentklasse.

AI-værktøjer scanner skabeloner for funktionskald i bindinger, som køres igen i hver digest-cyklus, og foreslår enten at cache resultatet på scope eller skifte til en engangsbinding.

AngularJS-evaluering er bevidst tilgivende. En manglende egenskab giver undefined, som gengives som en tom streng, så en tom værdi betyder normalt en tastefejl i egenskabsstien snarere end en runtime-fejl.

Opsummer dette indlæg med: