АнгуларЈС нг-поновна директива са примером

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

Anonim

Приказивање поновљених информација

Понекад се од нас може тражити да прикажемо листу ставки у приказу, па је питање како можемо приказати листу ставки дефинисаних у нашем контролеру на нашој страници приказа.

Ангулар пружа директиву названу „нг-репеат“ која се може користити за приказ понављајућих вредности дефинисаних у нашем контролеру.

Погледајмо пример како то можемо постићи.

Event Registration

Guru99 Global Event

Topics

  • {{tpname.name}}

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

  1. У контролеру прво дефинишемо наш низ ставки листе које желимо да дефинишемо у приказу. Овде смо дефинисали низ под називом "ТопицНамес" који садржи три ставке. Свака ставка састоји се од пара име и вредности.
  2. Низ ТопицсНамес се затим додаје променљивој члана која се назива „топицс“ и придружује се нашем опсегу опсега.
  3. Користимо ХТМЛ ознаке <ул> (Неуређена листа) и <ли> (Ставка листе) да бисмо приказали листу ставки у нашем низу. Затим користимо директиву нг-репеат за пролазак кроз сваку ставку у нашем низу. Реч „тпнаме“ је променљива која се користи за указивање на сваку ставку у темама низа.ТопицНамес.
  4. У овом ћемо приказати вредност сваке ставке низа.

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

Излаз:

Ангуларјс вишеструки контролери

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

Можда ћете желети да дефинишете више контролера да бисте одвојили различите функције пословне логике. Раније смо споменули постојање различитих метода у контролеру у којима је једна метода имала одвојену функционалност за сабирање и одузимање бројева. Па, можете имати више контролера да бисте имали напредније одвајање логике. На пример, можете имати један контролер који врши само операције над бројевима, а други који врши операције са жицама.

Погледајмо пример како можемо да дефинишемо више контролера у апликацији ангулар.ЈС.

Event Registration

Guru99 Global Event

{{lname}}

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

  1. Овде дефинишемо 2 контролера звана „фирстЦонтроллер“ и „сецондЦонтроллер“. За сваки контролер додајемо и неки код за обраду. У наш фирстЦонтроллер прилажемо променљиву звану „пнаме“ која има вредност „фирстЦонтроллер“, а у сецондЦонтроллер придајемо променљиву названу „лнаме“ која има вредност „сецондЦонтроллер“.
  2. У погледу, приступамо оба контролера и користимо променљиву члана из другог контролера.

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

Излаз:

Резиме

  • Директива нг-репеатер може се користити за приказ више понављајућих ставки.
  • Такође смо погледали напредни контролер који је погледао дефиницију више контролера у апликацији.