Výrazy AngularJS: ARRAY, Objects, $ eval, Strings (Příklady)

Obsah:

Anonim

Co jsou Angular JS Expressions?

Výrazy jsou proměnné, které byly definovány v dvojitých složených závorkách {{}}. Jsou velmi běžně používány v Angular JS a uvidíte je v našich předchozích výukových programech.

V tomto výukovém programu se naučíte

  • Vysvětlete příklady Angular.js
  • Čísla AngularJS
  • Řetězce AngularJS
  • Objekty AngularJS
  • Úhlová pole JS
  • Možnosti výrazu AngularJS a omezení
  • Rozdíl mezi výrazy a $ eval

Vysvětlete výrazy Angular.js s příkladem

Výrazy AngularJS jsou ty, které jsou zapsány do dvojitých závorek {{výraz}}.

Syntax:

Jednoduchým příkladem výrazu je {{5 + 6}}.

Angular.JS výrazy se používají k vazbě dat na HTML stejným způsobem jako směrnice ng-bind. AngularJS zobrazuje data přesně na místě, kde je výraz umístěn.

Podívejme se na příklad výrazů Angular.JS.

V tomto příkladu chceme jen ukázat jednoduché přidání čísel jako výraz.

Event Registration

Guru99 Global Event


Addition : {{6+9}}

Vysvětlení kódu:

  1. Direktiva ng-app v našem příkladu je prázdná, jak je znázorněno na výše uvedeném snímku obrazovky. To znamená pouze to, že k kódu není přidělen žádný modul pro přiřazení řadičů, směrnic, služeb.
  2. Přidáváme jednoduchý výraz, který se dívá na přidání 2 čísel.

Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Z výstupu

  • Je vidět, že se přidá dvě čísla 9 a 6 a zobrazí se přidaná hodnota 15.

Úhlová čísla JS

Výrazy lze použít také pro práci s čísly. Podívejme se na příklad výrazů Angular.JS s čísly.

V tomto příkladu chceme ukázat jednoduché násobení 2 číselných proměnných zvaných marže a zisk a zobrazit jejich vynásobenou hodnotu.

Event Registration

Guru99 Global Event


Total profit margin{{margin*profit}}

Vysvětlení kódu:

  1. Direktiva ng-init se používá v angular.js k definování proměnných a jejich odpovídajících hodnot v samotném pohledu. Je to něco jako definování lokálních proměnných pro kódování v libovolném programovacím jazyce. V tomto případě definujeme 2 proměnné zvané marže a zisk a přiřazujeme jim hodnoty.
  2. Poté použijeme 2 lokální proměnné a vynásobíme jejich hodnoty.

Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Z výstupu

  • Je jasně vidět, že dochází k násobení 2 čísel 2 a 200 a zobrazí se vynásobená hodnota 400.

Řetězce AngularJS

Výrazy lze použít také pro práci s řetězci. Podívejme se na příklad výrazů Angular JS s řetězci.

V tomto příkladu definujeme 2 řetězce „firstName“ a „lastName“ a zobrazíme je odpovídajícím způsobem pomocí výrazů.

Event Registration

Guru99 Global Event


   First Name : {{firstName}}
   last Name : {{lastName}}

Vysvětlení kódu:

  1. Direktiva ng-init se používá k definování proměnných firstName s hodnotou „Guru“ a proměnné lastName s hodnotou „99“.
  2. Potom používáme výrazy {{firstName}} a {{lastName}} pro přístup k hodnotě těchto proměnných a odpovídajícím způsobem je zobrazujeme v zobrazení.

Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Z výstupu je jasně vidět, že hodnoty křestního jména a příjmení se zobrazují na obrazovce.

Angular.JS objekty

Výrazy lze použít také pro práci s objekty JavaScriptu.

Podívejme se na příklad výrazů Angular.JS s objekty javascript. Objekt javascript se skládá z dvojice název-hodnota.

Níže je uveden příklad syntaxe objektu javascript.

Syntax:

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

V tomto příkladu budeme definovat jeden objekt jako objekt osoby, který bude mít 2 páry klíčových hodnot „firstName“ a „lastName“.

Event Registration

Guru99 Global Event


   First Name : {{person.firstName}}
   Last Name : {{person.lastName}}

Vysvětlení kódu:

  1. Direktiva ng-init se používá k definování osoby objektu, která má zase páry klíčových hodnot křestního jména s hodnotou "Guru" a proměnnou lastName s hodnotou "99".
  2. Poté používáme výrazy {{person.firstName}} a {{person.secondName}} pro přístup k hodnotě těchto proměnných a odpovídajícím způsobem je zobrazíme v zobrazení. Vzhledem k tomu, že skutečné členské proměnné jsou součástí osoby objektu, musí pro přístup k jejich skutečné hodnotě přistupovat k nim pomocí tečky (.).

Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Z výstupu

  • Je jasně vidět, že hodnoty „firstName“ a „secondName“ se zobrazují na obrazovce.

Úhlová pole JS

Výrazy lze použít také pro práci s poli. Podívejme se na příklad výrazů Angular JS s poli.

V tomto příkladu definujeme pole, které bude obsahovat známky studenta ve 3 předmětech. V pohledu odpovídajícím způsobem zobrazíme hodnotu těchto značek.

Event Registration

Guru99 Global Event


Student Marks
   Subject1 : {{marks[0] }}
   Subject2 : {{marks[1] }}
   Subject3 : {{marks[2] }}
   

Vysvětlení kódu:

  1. Používá se direktiva ng-init, která definuje pole se jménem „známky“ se 3 hodnotami 1, 15 a 19.
  2. Poté používáme výrazy značek [index] pro přístup ke každému prvku pole.

Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Z výstupu je jasně vidět, že zobrazené značky jsou definovány v poli.

Možnosti výrazu AngularJS a omezení

Funkce Angular.JS Expression

  1. Úhlové výrazy jsou jako výrazy JavaScriptu. Proto má stejnou sílu a flexibilitu.
  2. V JavaScriptu, když se pokusíte vyhodnotit nedefinované vlastnosti, vygeneruje ReferenceError nebo TypeError. V Angular je vyhodnocení výrazu odpouštějící a generuje nedefinované nebo null.
  3. K formátování dat před jejich zobrazením lze použít filtry v rámci výrazů.

Úhlová omezení výrazu JS

  1. V současné době není k dispozici použití podmíněných výrazů, smyček nebo výjimek v úhlovém výrazu
  2. Funkce v úhlovém výrazu nelze deklarovat, dokonce ani uvnitř direktivy ng-init.
  3. V úhlovém výrazu nelze vytvořit regulární výrazy. Regulární výraz je kombinace symbolů a znaků, které se používají k vyhledání řetězců, například. * \. Txt $. Takové výrazy nelze použít ve výrazech Angular JS.
  4. Jeden také nemůže použít nebo zrušit v úhlovém výrazu.

Rozdíl mezi výrazem a $ eval

Funkce $ eval umožňuje vyhodnocovat výrazy z řadiče samotného. Takže zatímco výrazy se používají pro vyhodnocení v pohledu, $ eval se používá ve funkci řadiče.

Podívejme se na jednoduchý příklad.

V tomto příkladu

Právě použijeme funkci $ eval k přidání 2 čísel a zpřístupníme ji v objektu oboru, aby ji bylo možné zobrazit v pohledu.

Event Registration


Guru99 Global Event

{{value}}

Vysvětlení kódu:

  1. Nejprve definujeme 2 proměnné „a“ a „b“, z nichž každá má hodnotu 1.
  2. Používáme funkci $ scope. $ Eval k vyhodnocení přidání 2 proměnných a jejich přiřazení k proměnné rozsahu 'value'.
  3. Potom v zobrazení pouze zobrazujeme hodnotu proměnné „value“.

Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Výše uvedený výstup ukazuje výstup výrazu, který byl vyhodnocen v řadiči. Výše uvedené výsledky ukazují, že výraz $ eval byl použit k provedení přidání 2 proměnných rozsahu „a a b“ s výsledkem odeslaným a zobrazeným v zobrazení.

Souhrn:

  • Viděli jsme, jak lze výrazy v Angular JS použít k vyhodnocení běžných výrazů jako JavaScript, jako je jednoduché přidání čísel.
  • Direktivu ng-init lze použít k definování proměnných in-line, které lze použít v pohledu.
  • Lze vytvořit výrazy pro práci s primitivními typy, jako jsou řetězce a čísla.
  • Výrazy lze také použít pro práci s jinými typy, jako jsou objekty JavaScript a pole.
  • Výrazy v Angular JS mají několik omezení, jako například nemít regulární výrazy nebo používat funkce, smyčky nebo podmíněné příkazy.