Výrazy AngularJS: Pole, Objekty, $eval, Řetězce

Od: James Hartman James Hartman
Hours aktualizováno

⚡ Chytré shrnutí

Výrazy v AngularJS jsou fragmenty kódu umístěné uvnitř dvojitých závorek, které vážou data přímo do šablony. Vyhodnocují čísla, řetězce, objekty a pole a funkce $eval provádí stejné vyhodnocení uvnitř kontroleru.

  • 🧩 Syntaxe vazby: Double Závorky vykreslí hodnotu tam, kde se výraz nachází, a dají stejný výsledek jako direktiva ng-bind.
  • 🔢 Podporované typy: Numbers, struny, JavaObjekty skriptu, ke kterým se přistupuje pomocí tečkové notace, a pole, ke kterým se přistupuje pomocí indexu, se vyhodnocují správně.
  • ???? ️ Vložené proměnné: Direktiva ng-init deklaruje proměnné na úrovni zobrazení, které pak mohou výrazy číst bez kontroleru.
  • 🛡️ Hodnocení odpouštějícího: Nedefinované vlastnosti vracejí nedefinované místo vrácení prostého ReferenceError JavaSkript by zvýšil.
  • 🚫 Pevné limity: Smyčky, výjimky, deklarace funkcí, regulární výrazy a operátory comma a void nejsou k dispozici.
  • ⚙️ Hodnocení kontroléru: $scope.$eval vyhodnocuje řetězec výrazu v kódu kontroleru a zpřístupňuje výsledek zobrazení.
  • ⚠️ Stav podpory: Podpora AngularJS skončila 31. prosince 2021 a neobdrží žádné další bezpečnostní záplaty.
Přečíst více

AngularJS výrazy

Co jsou výrazy v AngularJS?

Výrazy jsou proměnné zapsané uvnitř dvojitých závorek {{ }}Jsou velmi běžně používány v AngularJS a objevují se v předchozích tutoriálech v této sérii.

⚠️ Oznámení podpory: AngularJS dosaženo konec životnosti k 31. prosinci 2021 a neobdrží žádné další záplaty ani bezpečnostní opravy. Níže uvedená syntaxe zůstává správná pro údržbu stávajících aplikací AngularJS 1.x; nové projekty by měly používat moderní ANGULAR, kde interpolační závorky stále existují, ale ng-init a $eval ne.

Vysvětlete výrazy AngularJS na příkladu

Výrazy AngularJS se píší uvnitř dvojitých závorek, jako například {{expression}}.

Syntaxe: jednoduchý příklad výrazu je {{5 + 6}}.

Výrazy AngularJS vážou data k HTML stejným způsobem jako direktiva ng-bind a AngularJS zobrazuje data přesně tam, kde je výraz umístěn.

V tomto příkladu si ukážeme jednoduché sčítání čísel jako výraz.

AngularJS výrazy

<!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 Vysvětlení:

  1. Direktiva ng-app je prázdná, což znamená, že žádný modul nedodává řadiče, směrnice, nebo služeb na tuto stránku.
  2. Jednoduchý výraz sečte dvě čísla.

Výstup:

AngularJS výrazy

Proběhne sečtení 9 a 6 a zobrazí se výsledek 15.

AngularJS Numbers

Výrazy pracují s čísly. Tento příklad násobí dvě číselné proměnné, margin a profita zobrazí produkt.

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 Vysvětlení:

  1. Direktiva ng-init definuje proměnné a jejich hodnoty v samotném zobrazení, podobně jako lokální proměnné v jakémkoli programovací jazyk. Tady margin a profit jsou deklarovány a přiřazeny.
  2. Výraz pak vynásobí tyto dvě lokální proměnné.

Výstup:

AngularJS Numbers

Proběhne násobení 2 a 200 a zobrazí se součin 400.

AngularJS řetězce

Výrazy fungují také s řetězci. Tento příklad definuje firstName a lastName a zobrazuje obojí.

AngularJS řetězce

<!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 Vysvětlení:

  1. Direktiva ng-init definuje firstName s hodnotou „Guru" a lastName s hodnotou „99“.
  2. Výrazy {{firstName}} a {{lastName}} přečíst tyto proměnné a zobrazit je v pohledu.

Výstup:

AngularJS řetězce

Obě hodnoty se zobrazí na obrazovce.

SOUVISEJÍCÍ ČLÁNKY

Objekty AngularJS

Výrazy fungují s JavaScénář objekty, které se skládají z párů název-hodnota. Syntaxe JavaObjekt skriptu vypadá takto:

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

Tento příklad definuje person objekt obsahující dva páry klíč-hodnota, firstName a lastName.

Objekty AngularJS

<!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 Vysvětlení:

  1. Direktiva ng-init definuje objekt person s páry klíč-hodnota firstName nastaveno na „Guru" a lastName nastaveno na „99“.
  2. Výrazy {{person.firstName}} a {{person.lastName}} přečíst tyto členy. Protože patří k objektu, je k dosažení jejich hodnot vyžadována tečková notace.

Výstup:

Objekty AngularJS

Hodnoty firstName a lastName objevit se na obrazovce.

Pole AngularJS

Výrazy fungují s poli. Tento příklad definuje pole obsahující známky studenta ze tří předmětů a zobrazuje každou hodnotu.

Pole AngularJS

<!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 Vysvětlení:

  1. Direktiva ng-init definuje pole marks se třemi hodnotami 1, 15 a 19.
  2. Výrazy tvaru marks[index] přečtěte si každý prvek.

Výstup:

Pole AngularJS

Zobrazí se značky definované v poli.

Možnosti a omezení AngularJS Expression

Možnosti

  1. Výrazy AngularJS se podobají JavaSkriptovací výrazy a sdílejí mnoho stejných funkcí a flexibility.
  2. Kde JavaSkript vyvolává ReferenceError nebo TypeError u nedefinované vlastnosti, vyhodnocení v AngularJS je tolerantní a vrací undefined nebo null.
  3. Filtry lze použít uvnitř výrazu pro formátování dat před jejich zobrazením.
  4. Ternární operátor je podporován, takže {{ isReady ? 'Yes' : 'No' }} je platný.

Omezení

  1. Smyčky a ošetření výjimek nelze použít uvnitř výrazu AngularJS. Podmíněná logika je omezena na ternární operátor; if výpisy nejsou k dispozici.
  2. Funkce nelze deklarovat ve výrazu, a to ani uvnitř direktivy ng-init.
  3. Regulární výrazy nelze vytvářet uvnitř výrazu. Regulární výraz je kombinace symbolů a znaků používaných k porovnávání řetězců, například .*\.txt$a takové literály jsou odmítnuty.
  4. Operátor čárky (,) A void operátor není povolen.

ng-bind vs. výrazové závorky: Které použít

Double Složené závorky a direktiva ng-bind produkují stejný vykreslený výstup, takže volba mezi nimi vypadá libovolně. Není. Obě se chovají odlišně v okamžiku, než AngularJS dokončí načítání, a tento rozdíl je viditelný pro osobu, která stránku používá.

Vzhled {{ expression }} ng-bind
Napsal (a) Obsah prvku Atribut elementu
Před načtením AngularJS Na obrazovce blikají surové rovnátka Nic se nezobrazuje
čitelnost Vyšší – hodnota je v řádku Nižší — hodnota je skrytá v atributu
Více hodnot na prvek Ano Ne, pouze jedna vazba
Jednorázová vazba Ano, s {{::value}} Ano, s ng-bind="::value"

Krátký výskyt nezpracovaných závorek je známý jako záblesk neinterpolovaného obsahu a děje se tak proto, že prohlížeč vykreslí kód předtím, než ho AngularJS zkompiluje. Pro obsah viditelný nad ohybem použijte ng-bind nebo přidejte direktivu ng-cloak. Závorky zůstávají přehlednější a čitelnější volbou všude jinde, zejména tam, kde se uvnitř jednoho prvku objevuje několik hodnot.

Rozdíl mezi výrazem a $eval

Jedno $eval Funkce vyhodnocuje výrazy uvnitř kontroleru. Výrazy se vyhodnocují v zobrazení, zatímco $eval vyhodnocuje se v kódu kontroleru.

Tento příklad používá $eval sečíst dvě čísla a umístit výsledek na objekt scope, aby se v pohledu zobrazil.

Rozdíl mezi výrazem a $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 Vysvětlení:

  1. Dvě proměnné rozsahu, a a b, každý má hodnotu 1.
  2. $scope.$eval vyhodnotí jejich součet a přiřadí výsledek proměnné rozsahu platnosti value.
  3. Zobrazení se poté zobrazí value.

Výstup:

Rozdíl mezi výrazem a $eval

Výstup zobrazuje výraz vyhodnocený uvnitř kontrolor, přičemž součet dvou proměnných rozsahu je odeslán do zobrazení a zobrazen v něm.

Nejčastější dotazy

Uvedení dvou dvojteček před výraz, například v {{::name}}, přestane ji sledovat, jakmile je hodnota vyřešena. Tím se odstraní sledovací prvek a sníží se náklady na digest na stránkách s mnoha statickými vazbami.

$eval okamžitě vyhodnotí řetězec oproti rozsah. $parse vrací znovupoužitelnou funkci pro opakované vyhodnocení. $interpolate zpracovává celý řetězec šablony obsahující složené závorky, nikoli jeden výraz.

Většinou. AI Nástroje uchovávají závorky a přepisují filtry jako roury, ale proměnné ng-init nemají v Angularu ekvivalent a musí být ručně přesunuty do třídy komponenty.

Nástroje umělé inteligence prohledávají šablony a hledají volání funkcí uvnitř vazeb, které se znovu spouštějí v každém cyklu digest, a navrhují buď uložení výsledku do mezipaměti v rozsahu platnosti, nebo přepnutí na jednorázovou vazbu.

Vyhodnocování v AngularJS je záměrně shovívavé. Chybějící vlastnost vrací hodnotu undefined, která se vykreslí jako prázdný řetězec, takže prázdná hodnota obvykle znamená překlep v cestě k vlastnosti, nikoli chybu za běhu.

Shrňte tento příspěvek takto: