Výrazy AngularJS: POLE, objekty, $ eval, reťazce (príklady)

Obsah:

Anonim

Čo sú to uhlové výrazy JS?

Výrazy sú premenné, ktoré boli definované v dvojitých zložených zátvorkách {{}}. V Angular JS sa používajú veľmi často a videli by ste ich v našich predchádzajúcich tutoriáloch.

V tomto návode sa naučíte

  • Vysvetlite na príklade výrazy Angular.js
  • Čísla AngularJS
  • Struny AngularJS
  • Objekty AngularJS
  • Polia AngularJS
  • Možnosti a obmedzenia výrazu AngularJS
  • Rozdiel medzi výrazmi a $ eval

Vysvetlite na príklade výrazy Angular.js

Výrazy AngularJS sú tie, ktoré sú napísané v dvojitých zložených zátvorkách {{výraz}}.

Syntax:

Jednoduchým príkladom výrazu je {{5 + 6}}.

Výrazy Angular.JS sa používajú na viazanie údajov na HTML rovnakým spôsobom ako smernica ng-bind. AngularJS zobrazuje údaje presne na mieste, kde je umiestnený výraz.

Pozrime sa na príklad výrazov Angular.JS.

V tomto príklade chceme iba ukázať jednoduché sčítanie čísel ako výraz.

Event Registration

Guru99 Global Event


Addition : {{6+9}}

Vysvetlenie kódu:

  1. Direktíva ng-app je v našom príklade prázdna, ako je to znázornené na obrázku vyššie. To znamená iba to, že k kódu nie je pripojený žiadny modul na priradenie ovládačov, smerníc, služieb.
  2. Pridávame jednoduchý výraz, ktorý sleduje pridanie 2 čísel.

Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.

Výkon:

Z výstupu

  • Je vidieť, že dôjde k sčítaniu dvoch čísel 9 a 6 a zobrazí sa pridaná hodnota 15.

Uhlové čísla JS

S výrazmi je možné pracovať aj s číslami. Pozrime sa na príklad výrazov Angular.JS s číslami.

V tomto príklade chceme iba ukázať jednoduché znásobenie dvoch číselných premenných zvaných marža a zisk a zobraziť ich znásobenú hodnotu.

Event Registration

Guru99 Global Event


Total profit margin{{margin*profit}}

Vysvetlenie kódu:

  1. Direktíva ng-init sa v angular.js používa na definovanie premenných a ich zodpovedajúcich hodnôt v samotnom zobrazení. Je to niečo ako definovanie lokálnych premenných na kódovanie v ľubovoľnom programovacom jazyku. V tomto prípade definujeme 2 premenné nazývané marža a zisk a priraďujeme im hodnoty.
  2. Potom použijeme 2 lokálne premenné a ich hodnoty vynásobíme.

Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.

Výkon:

Z výstupu

  • Je jasne vidieť, že dochádza k znásobeniu 2 čísel 2 a 200 a zobrazí sa vynásobená hodnota 400.

Struny AngularJS

Výrazy možno použiť aj na prácu s reťazcami. Pozrime sa na príklad výrazov Angular JS s reťazcami.

V tomto príklade definujeme 2 reťazce „firstName“ a „lastName“ a zobrazíme ich pomocou výrazov.

Event Registration

Guru99 Global Event


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

Vysvetlenie kódu:

  1. Používa sa direktíva ng-init, ktorá definuje premenné firstName s hodnotou „Guru“ a premennú lastName s hodnotou „99“.
  2. Potom používame výrazy {{firstName}} a {{lastName}} na prístup k hodnote týchto premenných a ich zodpovedajúce zobrazenie v zobrazení.

Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.

Výkon:

Z výstupu je zrejmé, že na obrazovke sa zobrazujú hodnoty mena a priezviska.

Angular.JS objekty

Výrazy možno použiť aj na prácu s objektmi JavaScriptu.

Pozrime sa na príklad výrazov Angular.JS s objektmi javascript. Objekt javascript sa skladá z dvojice názov-hodnota.

Nižšie je uvedený príklad syntaxe objektu javascript.

Syntax:

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

V tomto príklade budeme definovať jeden objekt ako osobný objekt, ktorý bude mať 2 páry kľúčových hodnôt „firstName“ a „lastName“.

Event Registration

Guru99 Global Event


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

Vysvetlenie kódu:

  1. Direktíva ng-init sa používa na definovanie osoby objektu, ktorá má naopak páry dvojíc kľúčová hodnota firstName s hodnotou "Guru" a premennú lastName s hodnotou "99".
  2. Potom používame výrazy {{person.firstName}} a {{person.secondName}} na prístup k hodnote týchto premenných a ich zodpovedajúce zobrazenie v zobrazení. Pretože skutočné členské premenné sú súčasťou osoby objektu, musia k nim pristupovať pomocou bodky (.), Aby získali prístup k svojej skutočnej hodnote.

Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.

Výkon:

Z výstupu

  • Je zreteľne vidieť, že hodnoty „firstName“ a „secondName“ sa zobrazujú na obrazovke.

Polia AngularJS

Výrazy možno použiť aj na prácu s poľami. Pozrime sa na príklad výrazov Angular JS s poľami.

V tomto príklade definujeme pole, ktoré bude obsahovať známky študenta v 3 predmetoch. V zobrazení podľa toho zobrazíme hodnotu týchto značiek.

Event Registration

Guru99 Global Event


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

Vysvetlenie kódu:

  1. Používa sa direktíva ng-init, ktorá definuje pole s názvom „známky“ s 3 hodnotami 1, 15 a 19.
  2. Potom používame výrazy značiek [index] na prístup ku každému prvku poľa.

Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.

Výkon:

Z výstupu je jasne vidieť, že zobrazené značky sú definované v poli.

Možnosti a obmedzenia výrazu AngularJS

Možnosti výrazu Angular.JS

  1. Uhlové výrazy sú ako výrazy v jazyku JavaScript. Preto má rovnakú silu a flexibilitu.
  2. Pri pokuse o vyhodnotenie nedefinovaných vlastností v JavaScripte vygeneruje ReferenceError alebo TypeError. V Angular je hodnotenie výrazu zhovievavé a vygeneruje nedefinované alebo nulové.
  3. Na formátovanie údajov pred ich zobrazením je možné použiť filtre vo výrazoch.

Uhlové obmedzenia výrazu JS

  1. V súčasnosti nie je k dispozícii použitie podmienených výrazov, cyklov alebo výnimiek v uhlovom výraze
  2. Nemôžete deklarovať funkcie v uhlovom výraze, a to ani vo vnútri smernice ng-init.
  3. Nie je možné vytvárať regulárne výrazy v uhlovom výraze. Regulárny výraz je kombináciou symbolov a znakov, ktoré sa používajú na vyhľadanie reťazcov, napríklad. * \. Txt $. Takéto výrazy nemožno použiť v rámci výrazov Angular JS.
  4. Jeden tiež nemôže použiť alebo vyprázdniť uhlový výraz.

Rozdiel medzi výrazom a $ eval

Funkcia $ eval umožňuje hodnotiť výrazy z vlastného radiča. Takže zatiaľ čo sa výrazy používajú na hodnotenie v zobrazení, $ eval sa používa vo funkcii radiča.

Pozrime sa na jednoduchý príklad.

V tomto príklade

Pomocou funkcie $ eval pridáme 2 čísla a sprístupníme ich v objekte rozsahu, aby sa dali zobraziť v zobrazení.

Event Registration


Guru99 Global Event

{{value}}

Vysvetlenie kódu:

  1. Najprv definujeme 2 premenné „a“ a „b“, z ktorých každá má hodnotu 1.
  2. Na vyhodnotenie pridania dvoch premenných a ich priradenie k premennej rozsahu „value“ používame funkciu $ scope. $ Eval.
  3. Potom v zobrazení iba zobrazujeme hodnotu premennej „value“.

Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.

Výkon:

Vyššie uvedený výstup zobrazuje výstup výrazu, ktorý bol vyhodnotený v radiči. Vyššie uvedené výsledky ukazujú, že výraz $ eval sa použil na vykonanie pridania dvoch premenných rozsahu „a a b“ s výsledkom odoslaným a zobrazeným v zobrazení.

Zhrnutie:

  • Videli sme, ako sa dajú výrazy v Angular JS použiť na vyhodnotenie bežných výrazov v jazyku JavaScript, ako sú napríklad jednoduché sčítanie čísel.
  • Direktívu ng-init možno použiť na definovanie riadkových premenných, ktoré sa dajú použiť v zobrazení.
  • Výrazy je možné vytvoriť tak, aby fungovali s primitívnymi typmi, ako sú reťazce a čísla.
  • Výrazy je možné použiť aj na prácu s inými typmi, ako sú napríklad objekty JavaScript a polia.
  • Výrazy v Angular JS majú niekoľko obmedzení, napríklad nemusia mať regulárne výrazy alebo používať funkcie, slučky alebo podmienené príkazy.