AngularJS izrazi: ARRAY, objekti, $eval, nizovi [primjeri]
James Hartman
Što su kutni JS izrazi?
Izrazi su varijable koje su definirane u dvostrukim zagradama {{ }}. Vrlo se često koriste unutar Angular JS-a, a vidjeli biste ih u našim prethodnim tutorijalima.
Objasnite Angular.js izraze na primjeru
AngularJS izrazi su oni koji su napisani unutar dvostrukih zagrada {{expression}}.
Sintaksa:
Jednostavan primjer izraza je {{5 + 6}}.
Izrazi Angular.JS koriste se za povezivanje podataka s HTML-om na isti način kao i direktiva ng-bind. AngularJS prikazuje podatke točno na mjestu gdje se nalazi izraz.
Pogledajmo primjer Angular.JS izraza.
U ovom primjeru samo želimo prikazati jednostavno zbrajanje brojeva kao izraz.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="">
Addition : {{6+9}}
</div>
</body>
</html>
Objašnjenje koda:
- Direktiva ng-app u našem primjeru je prazna kao što je prikazano na gornjoj snimci zaslona. To samo znači da ne postoji modul za dodjelu kontrolera, direktive, usluge u prilogu šifre.
- Dodajemo jednostavan izraz koji gleda na zbrajanje 2 broja.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.
Izlaz:
Iz izlaza,
- Može se vidjeti da se zbrajaju dva broja 9 i 6 i prikazuje se dodana vrijednost 15.
Kutni.JS Numbers
Izrazi se mogu koristiti i za rad s brojevima. Pogledajmo primjer Angular.JS izraza s brojevima.
U ovom primjeru samo želimo prikazati jednostavno množenje 2 brojčane varijable koje se nazivaju marža i dobit i prikazati njihovu umnoženu vrijednost.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/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>
Objašnjenje koda:
- Direktiva ng-init koristi se u angular.js za definiranje varijabli i njihovih odgovarajućih vrijednosti u samom pogledu. To je nešto poput definiranja lokalnih varijabli za kodiranje u bilo kojem programski jezik. U ovom slučaju definiramo 2 varijable koje se nazivaju marža i dobit i dodjeljujemo im vrijednosti.
- Zatim koristimo 2 lokalne varijable i množimo njihove vrijednosti.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.
Izlaz:
Iz izlaza,
- Jasno se može vidjeti da se odvija množenje 2 broja 2 i 200, a prikazana je umnožena vrijednost 400.
AngularJS nizovi
Izrazi se također mogu koristiti za rad sa nizovima. Pogledajmo primjer Angular JS izraza sa stringovima.
U ovom primjeru ćemo definirati 2 niza "firstName" i "lastName" i prikazati ih koristeći izraze u skladu s tim.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/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>
Objašnjenje koda:
- Direktiva ng-init koristi se za definiranje varijabli firstName s vrijednošću "Guru" i varijable lastName s vrijednošću "99".
- Zatim koristimo izraze {{firstName}} i {{lastName}} za pristup vrijednosti ovih varijabli i njihov prikaz u prikazu u skladu s tim.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.
Izlaz:
Iz ispisa se jasno vidi da su vrijednosti FirstName i LastName prikazane na ekranu.
Angular.JS objekti
Izrazi se mogu koristiti za rad JavaScript objekti također.
Pogledajmo primjer Angular.JS izraza s javascript objektima. Javascript objekt sastoji se od para naziv-vrijednost.
Ispod je primjer sintakse javascript objekta.
Sintaksa:
var car = {type:"Ford", model:"Explorer", color:"White"};
U ovom primjeru definirat ćemo jedan objekt kao objekt osobe koji će imati 2 para ključeva vrijednosti "Ime" i "Prezime".
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/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>
Objašnjenje koda:
- Direktiva ng-init koristi se za definiranje objekta person koji zauzvrat ima parove ključnih vrijednosti firstName s vrijednošću "Guru" i varijablu lastName s vrijednošću "99".
- Zatim koristimo izraze {{person.firstName}} i {{person.secondName}} za pristup vrijednosti ovih varijabli i njihov prikaz u prikazu u skladu s tim. Budući da su stvarne varijable člana dio objekta person, moraju mu pristupiti s točkom (.) da bi pristupili svojoj stvarnoj vrijednosti.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.
Izlaz:
Iz izlaza,
- Jasno se može vidjeti da su vrijednosti “firstName” i “secondName” prikazane na ekranu.
AngularJS nizovi
Izrazi se također mogu koristiti za rad s nizovima. Pogledajmo primjer Angular JS izraza s nizovima.
U ovom primjeru definirat ćemo niz koji će sadržavati ocjene učenika iz 3 predmeta. U prikazu ćemo prikazati vrijednost ovih oznaka u skladu s tim.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/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] }}<br>
</div>
</body>
</html>
Objašnjenje koda:
- Direktiva ng-init koristi se za definiranje niza s nazivom "marks" s 3 vrijednosti 1, 15 i 19.
- Zatim koristimo izraze oznaka [index] za pristup svakom elementu niza.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.
Izlaz:
Iz izlaza se jasno vidi da su oznake koje se prikazuju definirane u nizu.
AngularJS Expression mogućnosti i ograničenja
Angular.JS Expression mogućnosti
- Kutni izrazi su kao JavaSkriptni izrazi. Stoga ima istu snagu i fleksibilnost.
- In JavaSkripta, kada pokušate procijeniti nedefinirana svojstva, generira ReferenceError ili TypeError. U Angularu, procjena izraza oprašta i generira nedefinirano ili null.
- Moguće je koristiti filtre unutar izraza za formatiranje podataka prije njihovog prikazivanja.
Ograničenja Angular JS izraza
- Trenutačno nema mogućnosti korištenja uvjeta, petlji ili iznimaka u Angular izrazu
- Ne možete deklarirati funkcije u Angular izrazu, čak ni unutar ng-init direktive.
- Ne mogu se stvoriti regularni izrazi u Angular izrazu. Regularni izraz kombinacija je simbola i znakova koji se koriste za traženje nizova kao što je .*\.txt$. Takvi se izrazi ne mogu koristiti unutar Angular JS izraza.
- Također, ne može se koristiti, ili void u Angular izrazu.
Razlika između izraza i $eval
Funkcija $eval omogućuje procjenu izraza unutar samog kontrolera. Dok se izrazi koriste za procjenu u pogledu, $eval se koristi u funkciji kontrolera.
Pogledajmo jednostavan primjer o tome.
U ovom primjeru
Samo ćemo upotrijebiti funkciju $eval da zbrojimo 2 broja i učinimo je dostupnom u objektu opsega tako da se može prikazati u prikazu.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.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>
Objašnjenje koda:
- Prvo definiramo 2 varijable 'a' i 'b', od kojih svaka ima vrijednost 1.
- Koristimo funkciju $scope.$eval za procjenu dodavanja 2 varijable i njihovo dodjeljivanje varijabli opsega 'vrijednost'.
- Tada samo prikazujemo vrijednost varijable 'vrijednost' u prikazu.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.
Izlaz:
Gornji izlaz prikazuje izlaz izraza koji je procijenjen u kontrolor. Gore navedeni rezultati pokazuju da je izraz $eval korišten za izvođenje zbrajanja 2 varijable opsega 'a i b' s rezultatom koji je poslan i prikazan u prikazu.
rezime
- Vidjeli smo kako se izrazi u Kutni JS može se koristiti za procjenu redovitih JavaIzrazi slični skripti kao što je jednostavno zbrajanje brojeva.
- Direktiva ng-init može se koristiti za definiranje varijabli u liniji koje se mogu koristiti u pogledu.
- Izrazi se mogu napraviti za rad s primitivnim tipovima kao što su nizovi i brojevi.
- Izrazi se također mogu koristiti za rad s drugim tipovima kao što su JavaSkriptni objekti i nizovi.
- Izrazi u Angular JS-u imaju nekoliko ograničenja poput, na primjer, ne smiju imati regularne izraze ili koristiti funkcije, petlje ili uvjetne izjave.
