Изрази АнгуларЈС: АРРАИ, Објекти, $ евал, жице (примери)

Преглед садржаја:

Anonim

Шта су угаони ЈС изрази?

Изрази су променљиве које су дефинисане у двоструким заградама {{}}. Они се врло често користе у оквиру Ангулар ЈС, а видели бисте их у нашим претходним водичима.

У овом упутству ћете научити-

  • Објасните изразе Ангулар.јс на примеру
  • АнгуларЈС Бројеви
  • АнгуларЈС жице
  • Објекти АнгуларЈС
  • АнгуларЈС низови
  • Могућности и ограничења израза АнгуларЈС
  • Разлика између израза и $ евал

Објасните изразе Ангулар.јс на примеру

Изрази АнгуларЈС су они који су написани унутар двоструких заграда {{израз}}.

Синтакса:

Једноставан пример израза је {{5 + 6}}.

Изрази Ангулар.ЈС користе се за повезивање података са ХТМЛ-ом на исти начин као и нг-бинд директива. АнгуларЈС приказује податке тачно на месту где је израз постављен.

Погледајмо пример израза Ангулар.ЈС.

У овом примеру желимо само да прикажемо једноставно додавање бројева као израз.

Event Registration

Guru99 Global Event


Addition : {{6+9}}

Објашњење кода:

  1. Директива нг-апп у нашем примеру је празна, као што је приказано на горњем снимку екрана. То само значи да не постоји модул за додељивање контролера, директива и услуга који су придружени коду.
  2. Додајемо једноставан израз који гледа на сабирање 2 броја.

Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.

Излаз:

Из резултата,

  • Може се видети да се збрајање два броја 9 и 6 одвија и приказује се додата вредност 15.

Угаоне.ЈС бројеви

Изрази се могу користити и за рад са бројевима. Погледајмо пример израза Ангулар.ЈС са бројевима.

У овом примеру желимо само да покажемо једноставно множење 2 нумеричке променљиве назване маржа и профит и приказали њихову помножену вредност.

Event Registration

Guru99 Global Event


Total profit margin{{margin*profit}}

Објашњење кода:

  1. Директива нг-инит се користи у ангулар.јс за дефинисање променљивих и њихових одговарајућих вредности у самом погледу. То је некако као да дефинишете локалне променљиве за кодирање на било ком програмском језику. У овом случају дефинишемо 2 променљиве које се називају маржа и профит и додељујемо им вредности.
  2. Тада користимо 2 локалне променљиве и множимо њихове вредности.

Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.

Излаз:

Из резултата,

  • Јасно се може видети да се множење 2 броја 2 и 200 одвија, а приказана је помножена вредност 400.

АнгуларЈС жице

Изрази се могу користити и за рад са низовима. Погледајмо пример Ангулар ЈС израза са стринговима.

У овом примеру дефинисаћемо 2 низа „фирстНаме“ и „ластНаме“ и приказати их помоћу израза у складу с тим.

Event Registration

Guru99 Global Event


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

Објашњење кода:

  1. Користи се нг-инит директива, дефинишите променљиве фирстНаме са вредношћу "Гуру" и променљиву ластНаме са вредношћу "99".
  2. Затим користимо изразе {{фирстНаме}} и {{ластНаме}} да приступимо вредности ових променљивих и прикажемо их у приказу у складу с тим.

Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.

Излаз:

Из резултата се јасно види да су вредности фирстНаме и ластНаме приказане на екрану.

Ангулар.ЈС Објекти

Изрази се могу користити и за рад са ЈаваСцрипт објектима.

Погледајмо пример израза Ангулар.ЈС са јавасцрипт објектима. Јавасцрипт објекат састоји се од пара име-вредност.

Испод је пример синтаксе јавасцрипт објекта.

Синтакса:

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

У овом примеру дефинисаћемо један објекат као објекат особе који ће имати 2 пара вредности кључа „фирстНаме“ и „ластНаме“.

Event Registration

Guru99 Global Event


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

Објашњење кода:

  1. Директива нг-инит се користи за дефинисање објекта особе која заузврат има парове вредности вредности фирстНаме са вредношћу "Гуру" и променљивом ластНаме са вредношћу "99".
  2. Затим користимо изразе {{персон.фирстНаме}} и {{персон.сецондНаме}} да приступимо вредности ових променљивих и прикажемо их у приказу у складу с тим. Будући да су стварне чланске променљиве део објектне особе, морају јој приступити тачком (.) Нотацијом да би приступиле њиховој стварној вредности.

Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.

Излаз:

Из резултата,

  • Јасно се може видети да су вредности „фирстНаме“ и „сецондНаме“ приказане на екрану.

АнгуларЈС низови

Изрази се могу користити и за рад са низовима. Погледајмо пример Ангулар ЈС израза са низовима.

У овом примеру дефинисаћемо низ који ће садржати оцене ученика из 3 предмета. У приказу ћемо у складу с тим приказати вредност ових ознака.

Event Registration

Guru99 Global Event


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

Објашњење кода:

  1. Користи се нг-инит директива, дефинишите низ са именом „марке“ са 3 вредности 1, 15 и 19.
  2. Затим користимо изразе ознака [индек] за приступ сваком елементу низа.

Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.

Излаз:

Из резултата се јасно види да се ознаке које се приказују, а које су дефинисане у низу.

Могућности и ограничења израза АнгуларЈС

Угаоне.ЈС могућности изражавања

  1. Угаони изрази су попут ЈаваСцрипт израза. Стога има исту снагу и флексибилност.
  2. У ЈаваСцрипт-у, када покушате да процените недефинисана својства, он генерише РеференцеЕррор или ТипеЕррор. У Ангулар-у, процена израза опрашта и генерише недефинисано или ништавно.
  3. Човек може да користи филтере у изразима за форматирање података пре него што их прикаже.

Угаона ограничења ЈС израза

  1. Тренутно нема расположивости за употребу условних услова, петљи или изузетака у угловном изразу
  2. Не можете декларирати функције у Ангулар изразу, чак ни унутар нг-инит директиве.
  3. Не могу се креирати регуларни изрази у Ангулар изразу. Регуларни израз је комбинација симбола и знакова који се користе за проналажење низова као што је. * \. Ткт $. Такви изрази се не могу користити у оквиру Ангулар ЈС израза.
  4. Такође, не може се користити или поништити у изразу Угаони.

Разлика између израза и $ евала

Функција $ евал омогућава процену израза унутар самог контролера. Дакле, док се изрази користе за процену у приказу, $ евал се користи у функцији контролера.

Погледајмо једноставан пример о овоме.

У овом примеру,

Управо ћемо користити функцију $ евал да додамо 2 броја и учинимо је доступном у објекту опсега тако да може бити приказана у приказу.

Event Registration


Guru99 Global Event

{{value}}

Објашњење кода:

  1. Прво дефинишемо 2 променљиве „а“ и „б“, од којих свака има вредност 1.
  2. Користимо функцију $ сцопе. $ Евал за процену додавања 2 променљиве и додељивање променљивој опсега 'валуе'.
  3. Тада само приказујемо вредност променљиве „вредност“ у приказу.

Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.

Излаз:

Горњи излаз приказује излаз израза који је оцењен у контролеру. Горњи резултати показују да је израз $ евал коришћен за додавање 2 променљиве опсега 'а и б' са резултатом послатим и приказаним у приказу.

Резиме:

  • Видели смо како се изрази у Ангулар ЈС могу користити за процену регуларних ЈаваСцрипт израза попут израза, попут једноставног сабирања бројева.
  • Директива нг-инит се може користити за дефинисање променљивих у реду које се могу користити у приказу.
  • Изрази се могу радити за примитивне типове као што су низови и бројеви.
  • Изрази се такође могу користити за рад са другим врстама као што су ЈаваСцрипт објекти и низови.
  • Изрази у Ангулар ЈС-у имају неколико ограничења, на пример да не треба имати регуларне изразе или користити функције, петље или условне изразе.