AngularJS - Работа с повтарящи се елементи

Ключова част от уеб приложенията е извадка от списъкТова винаги ще бъде важно, когато работим с бази данни, тъй като трябва да показваме съхранени елементи, както и, например, ако управляваме онлайн магазин, трябва да показваме списък с продукти.
Това, което трябва да разберем, че въпреки че записите са различни, елементите като такива се повтарят, тъй като те вероятно са редове от таблица или подреден списък, каквато и разлика в съдържанието не представлява разлика в структурата.
AngularJS не усложнява живота ни, просто ако искаме да използваме или да направим списък, който трябва да използваме ng-повторение което създава елемент за всеки елемент, съдържащ се в списък, с това можем да предадем списък с продукти и лесно да генерираме таблица.
Да кажем, че правим списък с ученици за училище, ключът е да генерираме списъка, обикновено бихме го получили от някои Уеб сервиз което се консултира с база данни, но за да опростим, ние сами ще направим списък, след което наричаме този списък в нашия $ обхват за да можете да го използвате, с него в рамките на HTML можем да включим инструкцията ng-повторение което споменахме, нека видим следния код:

 var students = [{name: 'María Rojo', id: '1'}, {name: 'Manolo Rodriguez', id: '2'}, {name: 'Joao Pinto', id: '3'}]; функция StudentListController ($ обхват) {$ обхват.студенти = студенти; } 

Тук дефинирахме списъка с ученици и след това дефинирахме контролера, с който предаваме този списък на $ обхват от контролер, сега трябва да напишем кода HTML:

 
 
 {{student.name}}

Тук виждаме, че дефинираме нашия списък като контролер на AngularJS а с него и $ обхват на споменатия контролер ни позволява достъп до списъка с ученици, след което използваме ng-повторение казвайки ви, че ще създадете ученик за всеки елемент от списъка с ученици и накрая в рамките на

създаваме котва, която ни отвежда на друго място в приложението. Нека видим следното изображение как изглежда това в нашия браузър:

Функция Splice ()Друго нещо, което можем да направим, е да включим нови елементи в списъка, за това имаме функцията снаждане ()Ако например го включим в бутон, който добавя нови ученици, автоматично ще видим промяната, благодарение на факта, че AngularJS Той ни дава онова освежаване в реално време на документа, без да се налага да презареждаме страницата.
Нека да видим в следния код как ще изглежда контролерът, за да добави ученик:

 var students = [{name: 'María Rojo', id: '1'}, {name: 'Manolo Rodriguez', id: '2'}, {name: 'Joao Pinto', id: '3'}]; функция StudentListController ($ обхват) {$ обхват.студенти = студенти; $ scope.addNew = function () {$ scope.students.splice (1, 0, {name: 'Joaquin Fernandez', id: '4'}); }; } 

Сега просто трябва да извикаме новата функция в нашата HTML, можем да го направим по следния начин:

 {{student.name}}

Вмъкване

Нека да видим как изглежда това в нашия браузър:

Виждаме как сме добавили новия ученик в списъка, но всеки път, когато щракнем върху бутона, добавяме едно и също лице, това е така, защото не сме направили динамичен код, но това е друг въпрос, което трябва да подчертаем е, че ние трябваше да добави към който сме поставили контролера, по този начин бихме могли да включим нашия бутон в $ обхват.
С това завършваме този урок, тъй като виждаме обработката на повтарящи се елементи в AngularJS Той е доста прост и ни дава възможност бързо да създаваме списъци, както можем да видим в примерите.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка