AngularJS-uttryck: Array, Objekt, $eval, Strängar

By: James Hartman James Hartman
Hours Uppdaterad

⚡ Smart sammanfattning

AngularJS-uttryck är kodfragment placerade inom dubbla klammerparenteser som binder data direkt till en mall. De utvärderar tal, strängar, objekt och arrayer, och funktionen $eval utför samma utvärdering inifrån en kontroller.

  • 🧩 Bindningssyntax: Double klammerparenteser återger ett värde där uttrycket sitter, vilket ger samma resultat som ng-bind-direktivet.
  • 🔢 Stödda typer: Numbers, strängar, JavaSkriptobjekt som nås med punktnotation och arrayer som nås via index utvärderas alla korrekt.
  • 🏷️ Inline-variabler: Direktivet ng-init deklarerar variabler på vynivå som uttryck sedan kan läsa utan en kontroller.
  • 🛡️ Förlåtande utvärdering: Odefinierade egenskaper ger odefinierad snarare än att utlösa ReferenceError-slätten JavaSkriptet skulle höjas.
  • ???? Hårda gränser: Loopar, undantag, funktionsdeklarationer, reguljära uttryck och operatorerna komma och void är inte tillgängliga.
  • ⚙️ Utvärdering av styrenheter: $scope.$eval utvärderar en uttryckssträng i kontrollkod och exponerar resultatet för vyn.
  • ⚠️ Supportstatus: AngularJS nådde slutet av sin livscykel den 31 december 2021 och får inga ytterligare säkerhetsuppdateringar.
Läs mer

AngularJS uttryck

Vad är AngularJS-uttryck?

Uttryck är variabler skrivna inom dubbla klammerparenteser {{ }}De används mycket ofta i AngularJS och förekommer i de tidigare handledningarna i den här serien.

⚠️ Supportmeddelande: AngularJS nådde slut på livscykeln den 31 december 2021 och får inga ytterligare patchar eller säkerhetsfixar. Syntaxen nedan förblir korrekt för underhåll av befintliga AngularJS 1.x-applikationer; nya projekt bör använda moderna Vinkel, där interpoleringsklackar fortfarande finns men ng-init och $eval låt bli.

Förklara AngularJS-uttryck med ett exempel

AngularJS-uttryck skrivs inom dubbla klammerparenteser, som i {{expression}}.

Syntax: ett enkelt exempel på ett uttryck är {{5 + 6}}.

AngularJS-uttryck binder data till HTML på samma sätt som ng-bind-direktivet, och AngularJS visar data exakt där uttrycket är placerat.

I det här exemplet visar vi en enkel addition av tal som ett uttryck.

AngularJS uttryck

<!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 Förklaring:

  1. ng-app-direktivet är tomt, vilket betyder att ingen modul förser styrenheter, direktiveller tjänster till den här sidan.
  2. Ett enkelt uttryck adderar två tal.

Produktion:

AngularJS uttryck

Additionen av 9 och 6 sker och resultatet, 15, visas.

AngularJS Numbers

Uttryck fungerar med tal. Det här exemplet multiplicerar två talvariabler, margin och profit, och visar produkten.

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 Förklaring:

  1. Direktivet ng-init definierar variabler och deras värden i själva vyn, ungefär som lokala variabler i vilken som helst programmeringsspråk. Här margin och profit deklareras och tilldelas.
  2. Uttrycket multiplicerar sedan dessa två lokala variabler.

Produktion:

AngularJS Numbers

Multiplikationen av 2 och 200 sker och produkten, 400, visas.

AngularJS Strings

Uttryck fungerar även med strängar. Det här exemplet definierar firstName och lastName och visar båda.

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 Förklaring:

  1. Direktivet ng-init definierar firstName med värdet "Guru"Och lastName med värdet ”99”.
  2. Uttrycken {{firstName}} och {{lastName}} läs dessa variabler och visa dem i vyn.

Produktion:

AngularJS Strings

Båda värdena visas på skärmen.

RELATERADE ARTIKLAR

AngularJS-objekt

Uttryck fungerar med JavaScript objekt, som består av namn-värdepar. Syntaxen för en JavaSkriptobjektet ser ut så här:

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

Detta exempel definierar en person objekt som innehåller två nyckel-värde-par, firstName och lastName.

AngularJS-objekt

<!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 Förklaring:

  1. Direktivet ng-init definierar objektet person med nyckel-värde-paren firstName satt till "Guru"Och lastName inställd på “99”.
  2. Uttrycken {{person.firstName}} och {{person.lastName}} läs dessa medlemmar. Eftersom de tillhör objektet krävs punktnotation för att nå deras värden.

Produktion:

AngularJS-objekt

Värdena för firstName och lastName visas på skärmen.

AngularJS-arrayer

Uttryck fungerar med arrayer. Det här exemplet definierar en array som innehåller en elevs betyg i tre ämnen och visar varje värde.

AngularJS-arrayer

<!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 Förklaring:

  1. Direktivet ng-init definierar arrayen marks med de tre värdena 1, 15 och 19.
  2. Uttryck av formen marks[index] läs varje element.

Produktion:

AngularJS-arrayer

Markeringarna som definierats i arrayen visas.

AngularJS-uttrycksmöjligheter och begränsningar

Capabilities

  1. AngularJS-uttryck liknar JavaSkriptuttryck delar mycket av samma kraft och flexibilitet.
  2. Var JavaSkriptet genererar ett ReferenceError eller TypeError på en odefinierad egenskap, AngularJS-utvärderingen är förlåtande och ger odefinierad eller null.
  3. Filter kan tillämpas inuti ett uttryck för att formatera data innan den visas.
  4. Den ternära operatorn stöds, så {{ isReady ? 'Yes' : 'No' }} är giltig.

Begränsningar

  1. Loopar och undantagshantering kan inte användas inuti ett AngularJS-uttryck. Villkorlig logik är begränsad till den ternära operatorn; if uttalanden finns inte tillgängliga.
  2. Funktioner kan inte deklareras i ett uttryck, inte ens inuti ett ng-init-direktiv.
  3. Reguljära uttryck kan inte skapas inuti ett uttryck. Ett reguljärt uttryck är en kombination av symboler och tecken som används för att matcha strängar, till exempel .*\.txt$, och sådana litteraler avvisas.
  4. Kommaoperatorn (,) Och void operatören är inte tillåtna.

ng-bind vs. Expression Braces: Vilken ska man använda?

Double klammerparenteser och ng-bind-direktivet producerar samma renderade utdata, så valet mellan dem ser godtyckligt ut. Det är det inte. De två beter sig olika under tiden innan AngularJS har laddats klart, och den skillnaden är synlig för personen som använder sidan.

Aspect {{ expression }} ng-bind
Skrivet i Elementinnehåll Ett elementattribut
Innan AngularJS laddas Råa tandställningsblinkar på skärmen Ingenting visas
läsbarhet Högre — värdet ligger i linje Lägre — värdet är dolt i ett attribut
Flera värden per element Ja Nej, endast en bindning
Engångsbindning Ja, med {{::value}} Ja, med ng-bind="::value"

Den korta förekomsten av råa klammerparenteser kallas för "flash of uninterpolated content", och det händer eftersom webbläsaren renderar markupen innan AngularJS kompilerar den. Använd ng-bind, eller lägg till ng-cloak-direktivet, för innehåll som syns ovanför vikningen. Klammerparenteser är fortfarande det tydligare och mer läsbara valet överallt annars, särskilt där flera värden visas inuti ett element.

Skillnaden mellan expression och $eval

Ocuco-landskapet $eval Funktionen utvärderar uttryck inifrån kontrollenheten. Uttryck utvärderas i vyn, medan $eval utvärderas i kontrollkod.

Detta exempel använder $eval att addera två tal och placera resultatet på oscilloskopobjektet så att vyn kan visa det.

Skillnaden mellan expression och $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 Förklaring:

  1. Två omfattningsvariabler, a och b, var och en har värdet 1.
  2. $scope.$eval utvärderar deras addition och tilldelar resultatet till scope-variabeln value.
  3. Vyn visas sedan value.

Produktion:

Skillnaden mellan expression och $eval

Utdata visar uttrycket som utvärderas inuti styrenhet, med summan av de två omfattningsvariablerna som skickas till och visas i vyn.

Vanliga frågor

Att prefixera ett uttryck med två kolon, som i {{::name}}, slutar titta på den när ett värde har lösts. Detta tar bort tittaren och sänker digestkostnaden på sidor med många statiska bindningar.

$eval utvärderar en sträng omedelbart mot en omfattning. $parse returnerar en återanvändbar funktion för upprepad utvärdering. $interpolate hanterar en hel mallsträng som innehåller klammerparenteser snarare än ett enda uttryck.

Till största del. AI Verktyg behåller klammerparenteser och omskriver filter som rör, men ng-init-variabler har ingen Angular-ekvivalent och måste flyttas till en komponentklass manuellt.

AI-verktyg skannar mallar efter funktionsanrop inuti bindningar, vilka körs igen vid varje digestcykel, och föreslår antingen att resultatet cachas i scopet eller att man byter till en engångsbindning.

AngularJS-utvärderingen är avsiktligt förlåtande. En saknad egenskap ger odefinierad, vilket återges som en tom sträng, så ett tomt värde betyder vanligtvis ett stavfel i egenskapssökvägen snarare än ett körtidsfel.

Sammanfatta detta inlägg med: