AngularJS kifejezések: Tömb, Objektumok, $eval, Sztringek

By: James Hartman James Hartman
Hours korszerűsített

⚡ Okos összefoglaló

Az AngularJS kifejezések dupla zárójelek közé helyezett kódrészletek, amelyek közvetlenül egy sablonhoz kötik az adatokat. Számokat, karakterláncokat, objektumokat és tömböket értékelnek ki, és az $eval függvény ugyanezt a kiértékelést hajtja végre egy vezérlőn belülről.

  • 🧩 Kötési szintaxis: Double A zárójelek egy értéket jelenítenek meg ott, ahol a kifejezés található, ugyanazt az eredményt adva, mint az ng-bind direktíva.
  • 🔢 Támogatott típusok: Numbers, húrok, JavaA pont jelöléssel elért szkript objektumok és az index alapján elért tömbök mind helyesen értékelődnek ki.
  • 🏷️ Beágyazott változók: Az ng-init direktíva nézet szintű változókat deklarál, amelyeket a kifejezések ezután vezérlő nélkül is beolvashatnak.
  • 🛡️ Megbocsátó értékelés: A nem definiált tulajdonságok nem ReferenceError hibát dobnak, hanem undefined eredményt adnak. JavaA szkript emelne.
  • ???? Kemény korlátok: Ciklusok, kivételek, függvénydeklarációk, reguláris kifejezések, valamint a vessző és a void operátorok nem érhetők el.
  • 🇧🇷 Vezérlő értékelése: A $scope.$eval függvény kiértékel egy kifejezésstringet a vezérlő kódjában, és az eredményt elérhetővé teszi a nézet számára.
  • ⚠️ Támogatási állapot: Az AngularJS 2021. december 31-én elérte az élettartama végét, és további biztonsági javításokat nem kap.
További információk

AngularJS kifejezések

Mik azok az AngularJS kifejezések?

A kifejezések dupla zárójelek közé írt változók {{ }}Nagyon gyakran használják őket az AngularJS-en belül, és a sorozat korábbi oktatóanyagaiban is megjelennek.

⚠️ Támogatási közlemény: AngularJS elérve élettartam vége 2021. december 31-én és nem kap további javításokat vagy biztonsági javításokat. Az alábbi szintaxis továbbra is pontos a meglévő AngularJS 1.x alkalmazások karbantartása érdekében; az új projekteknek modern szögletes, ahol az interpolációs zárójelek még mindig léteznek, de ng-init és a $eval nem.

Magyarázd el az AngularJS kifejezéseket egy példával

Az AngularJS kifejezéseket dupla zárójelek közé írjuk, mint például {{expression}}.

Syntax: egy egyszerű példa a kifejezésre {{5 + 6}}.

Az AngularJS kifejezések ugyanúgy kötik az adatokat a HTML-hez, mint az ng-bind direktíva, és az AngularJS pontosan oda jeleníti meg az adatokat, ahol a kifejezés található.

Ebben a példában számok egyszerű összeadását mutatjuk be kifejezésként.

AngularJS kifejezések

<!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 Magyarázat:

  1. Az ng-app direktíva üres, ami azt jelenti, hogy egyetlen modul sem lát el vezérlőket, irányelvek, vagy szolgáltatásokat ehhez az oldalhoz.
  2. Egy egyszerű kifejezés két számot összead.

output:

AngularJS kifejezések

Megtörténik a 9 és a 6 összeadása, és az eredmény, a 15 jelenik meg.

AngularJS Numbers

A kifejezések számokkal dolgoznak. Ez a példa két számváltozót szoroz össze, margin és a profit, és megjeleníti a terméket.

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 Magyarázat:

  1. Az ng-init direktíva magában a nézetben definiálja a változókat és azok értékeit, hasonlóan a lokális változókhoz bármely más nézetben. programozási nyelv. Itt margin és a profit deklarálják és kiosztják.
  2. A kifejezés ezután megszorozza ezt a két lokális változót.

output:

AngularJS Numbers

Megtörténik a 2 és 200 szorzása, és a szorzat, a 400 jelenik meg.

AngularJS húrok

A kifejezések karakterláncokkal is működnek. Ez a példa a következőt definiálja: firstName és a lastName és mindkettőt megjeleníti.

AngularJS húrok

<!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 Magyarázat:

  1. Az ng-init direktíva meghatározza firstName az „értékkel”Guru"És lastName „99” értékkel.
  2. A kifejezések {{firstName}} és a {{lastName}} Olvasd be ezeket a változókat, és jelenítsd meg őket a nézetben.

output:

AngularJS húrok

Mindkét érték megjelenik a képernyőn.

KAPCSOLÓDÓ CIKKEK

AngularJS objektumok

A kifejezések működnek a következőkkel: JavaForgatókönyv objektumok, amelyek név-érték párokból állnak. A szintaxisa egy JavaA szkript objektum így néz ki:

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

Ez a példa egy person két kulcs-érték párt tartalmazó objektum, firstName és a lastName.

AngularJS objektumok

<!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 Magyarázat:

  1. Az ng-init direktíva definiálja az objektumot person a kulcs-érték párokkal firstName állítva "Guru"És lastName „99”-re állítva.
  2. A kifejezések {{person.firstName}} és a {{person.lastName}} Olvasd be ezeket a tagokat. Mivel az objektumhoz tartoznak, pontjelölés szükséges az értékük eléréséhez.

output:

AngularJS objektumok

Az értékek firstName és a lastName jelennek meg a képernyőn.

AngularJS tömbök

A kifejezések tömbökkel működnek. Ez a példa egy olyan tömböt definiál, amely egy diák három tantárgyból szerzett jegyeit tartalmazza, és megjeleníti az egyes értékeket.

AngularJS tömbök

<!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 Magyarázat:

  1. Az ng-init direktíva definiálja a tömböt marks a három értékkel: 1, 15 és 19.
  2. A forma kifejezései marks[index] olvasd el az egyes elemeket.

output:

AngularJS tömbök

A tömbben definiált jelek megjelennek.

AngularJS Expression képességek és korlátok

Képességek

  1. Az AngularJS kifejezések hasonlóak JavaA szkriptkifejezések és a nagyrészt ugyanazzal a teljesítménnyel és rugalmassággal rendelkeznek.
  2. Hol JavaA szkript ReferenceError vagy TypeError hibát generál egy undefined tulajdonságon, az AngularJS kiértékelése megbocsátó, és undefined vagy null értéket ad vissza.
  3. A szűrők egy kifejezésen belül alkalmazhatók az adatok formázására, mielőtt azok megjelennének.
  4. A ternáris operátor támogatott, tehát {{ isReady ? 'Yes' : 'No' }} érvényes.

korlátozások

  1. Ciklusok és kivételkezelés nem használhatók AngularJS kifejezéseken belül. A feltételes logika a ternáris operátorra korlátozódik; if kimutatások nem állnak rendelkezésre.
  2. A függvényeket nem lehet kifejezésben deklarálni, még egy ng-init direktíván belül sem.
  3. Reguláris kifejezések nem hozhatók létre kifejezéseken belül. A reguláris kifejezés szimbólumok és karakterek kombinációja, amelyek karakterláncok egyeztetésére szolgálnak, például .*\.txt$, és az ilyen literálokat elutasítjuk.
  4. A vessző operátor (,), És a void kezelők nem engedélyezettek.

ng-bind vs. Expression Braces: Melyiket használjuk?

Double A zárójelek és az ng-bind direktíva ugyanazt a renderelt kimenetet eredményezi, így a köztük lévő választás önkényesnek tűnik. Nem az. A kettő másképp viselkedik az AngularJS betöltésének befejezése előtti pillanatban, és ez a különbség látható az oldalt használó személy számára.

Aspect {{ expression }} ng-bind
Írtam be Elem tartalma Egy elem attribútuma
Az AngularJS betöltése előtt Nyers fogszabályozók villannak fel a képernyőn Semmi sem látható
olvashatóság Magasabb – az érték egy vonalban van Alsó – az érték egy attribútumban rejtve van
Több érték elemenként Igen Nem, csak egy kötés
Egyszeri kötés Igen {{::value}} Igen ng-bind="::value"

A nyers zárójelek rövid megjelenését interpolálatlan tartalom felvillanásának nevezik, és azért történik, mert a böngésző a jelölőkódot megjeleníti, mielőtt az AngularJS lefordítaná azt. Használj ng-bind utasítást, vagy add hozzá az ng-cloak direktívát a hajtás felett látható tartalomhoz. A zárójelek továbbra is a tisztább és olvashatóbb választás mindenhol máshol, különösen ott, ahol több érték jelenik meg egy elemen belül.

Különbség a kifejezés és a $eval között

Az $eval A függvény a vezérlőn belüli kifejezéseket értékeli ki. A kifejezések a nézetben értékelődnek ki, míg $eval vezérlőkódban értékelődik ki.

Ez a példa a következőt használja: $eval két szám összeadásához és az eredmény elhelyezéséhez a scope objektumon, hogy a nézet megjeleníthesse.

Különbség a kifejezés és a $eval között

<!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 Magyarázat:

  1. Két hatókörű változó, a és a b, mindegyik 1 értéket visel.
  2. $scope.$eval kiértékeli az összeadásukat, és az eredményt hozzárendeli a hatókör változóhoz value.
  3. A nézet ezután megjelenik value.

output:

Különbség a kifejezés és a $eval között

A kimenet a kiértékelt kifejezést mutatja a ellenőr, a két hatókör-változó összegével, amely elküldésre kerül a nézetnek és megjelenik ott.

GYIK

Kifejezés elé két kettőspontot tenni, mint például {{::name}}, leállítja a figyelését, amint egy érték feloldásra kerül. Ez eltávolítja a figyelőt, és csökkenti a kivonatolási költséget a sok statikus kötéssel rendelkező oldalakon.

$eval azonnal kiértékel egy karakterláncot egy hatálya. $parse egy újrafelhasználható függvényt ad vissza ismételt kiértékeléshez. $interpolate egy teljes, zárójeleket tartalmazó sablon karakterláncot kezel egyetlen kifejezés helyett.

Többnyire. AI Az eszközök megtartják a zárójeleket és a szűrőket pipe-ként írják át, de az ng-init változóknak nincs Angular megfelelőjük, és kézzel kell áthelyezni őket egy komponensosztályba.

A mesterséges intelligencia eszközök sablonokat keresnek a kötéseken belüli függvényhívások után, amelyek minden kivonatolási ciklusban újrafutnak, és azt javasolják, hogy vagy gyorsítótárazza az eredményt a hatókörön, vagy váltson egyszeri kötésre.

Az AngularJS kiértékelése szándékosan elnéző. Egy hiányzó tulajdonság „undefined” értéket eredményez, ami üres karakterláncként jelenik meg, így az üres érték általában elírást jelent a tulajdonság elérési útjában, nem pedig futásidejű hibát.

Foglald össze ezt a bejegyzést a következőképpen: