АнгуларЈС - Руковање елементима који се понављају

Кључни део веб апликација је навођење узоркаОво ће увек бити важно кад год радимо са базама података, јер морамо да прикажемо ускладиштене ставке, као и, на пример, ако водимо интернет продавницу, морамо да прикажемо листу производа.
Оно што морамо схватити је да, иако су записи различити, елементи као такви се понављају, будући да су вјероватно редови табеле или уређене листе, без обзира на разлику у садржају не представља разлику у структури.
АнгуларЈС не компликује наше животе, једноставно ако желимо да користимо или направимо списак који морамо да користимо нг-репеат који ствара елемент за сваки елемент који се налази на листи, са овим можемо проследити листу производа и лако генерисати табелу.
Рецимо да правимо списак ученика за школу, кључ је да генеришемо листу, обично бисмо је добили од неких веб сервис то консултује базу података, али да поједноставимо, ми ћемо сами направити листу, па ову листу називамо унутар наше $ опсег да бисте могли да га користите, са њим у оквиру ХТМЛ можемо укључити упутство нг-репеат које смо поменули, да видимо следећи код:

 вар студентс = [{наме: 'Мариа Ројо', ид: '1'}, {наме: 'Маноло Родригуез', ид: '2'}, {наме: 'Јоао Пинто', ид: '3'}]; функција СтудентЛистЦонтроллер ($ опсег) {$ сцопе.студентс = студенти; } 

Овде смо дефинисали списак ученика, а затим дефинишемо контролер са којим проследимо наведену листу $ опсег од контролер, сада морамо написати код ХТМЛ:

 
 
 {{име студента}}

Овде видимо да нашу листу дефинишемо као контролер АнгуларЈС а са њим и $ опсег наведеног контролера омогућава нам приступ списку ученика, а затим користимо нг-репеат говорећи вам да ћете створити ученика за сваки елемент листе ученика и на крају у оквиру

стварамо сидро које нас води на друго место у оквиру апликације. Погледајмо следећу слику како ово изгледа у нашем прегледачу:

Сплице () функцијаЈош једна ствар коју можемо да урадимо је да уврстимо нове елементе у листу, јер за то имамо функцију спајање ()Ако га, на пример, уградимо у дугме које додаје нове ученике, аутоматски ћемо видети промену, захваљујући чињеници да АнгуларЈС Даје нам додир освежења у реалном времену документа без потребе за поновним учитавањем странице.
Погледајмо у следећем коду како би контролер изгледао да дода ученика:

 вар студентс = [{наме: 'Мариа Ројо', ид: '1'}, {наме: 'Маноло Родригуез', ид: '2'}, {наме: 'Јоао Пинто', ид: '3'}]; функција СтудентЛистЦонтроллер ($ опсег) {$ сцопе.студентс = студенти; $ сцопе.аддНев = фунцтион () {$ сцопе.студентс.сплице (1, 0, {наме: 'Јоакуин Фернандез', ид: '4'}); }; } 

Сада само морамо позвати нову функцију у нашој ХТМЛ, то можемо учинити на следећи начин:

 {{име студента}}

Инсерт

Хајде да видимо како ово изгледа у нашем прегледачу:

Видимо како смо додали новог ученика на листу, међутим сваки пут када кликнемо на дугме додамо исту особу, то је зато што нисмо направили динамички код, али то је друга ствар, оно што морамо истаћи је да ми смо морали да додати а на који смо поставили контролер, на овај начин бисмо могли да укључимо наше дугме у $ опсег.
Овим завршавамо овај водич, јер видимо руковање поновљеним елементима у АнгуларЈС Прилично је једноставно и даје нам могућност да брзо направимо листе као што смо могли видети у примерима.Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен