AngularJS - Obsługa powtarzających się elementów

Kluczową częścią aplikacji internetowych jest próbka aukcjiZawsze będzie to ważne, gdy pracujemy z bazami danych, ponieważ musimy pokazać przechowywane przedmioty, a także np. jeśli prowadzimy sklep internetowy, musimy pokazać listę produktów.
Musimy zrozumieć, że chociaż rekordy są różne, elementy jako takie są powtarzane, ponieważ prawdopodobnie są to wiersze tabeli lub uporządkowanej listy, niezależnie od różnicy w treści, która nie reprezentuje różnicy w strukturze.
AngularJS nie komplikuje nam życia, po prostu jeśli chcemy użyć lub zrobić listę, musimy użyć ng-powtórz który tworzy element dla każdego elementu zawartego na liście, dzięki temu możemy przekazać listę produktów i łatwo wygenerować tabelę.
Powiedzmy, że robimy listę uczniów dla szkoły, kluczem jest wygenerowanie listy, normalnie otrzymalibyśmy ją od jakiegoś Serwis internetowy który konsultuje się z bazą danych, ale dla uproszczenia sami stworzymy listę, wtedy nazywamy tę listę w naszym $ zakres aby móc z niego korzystać, z nim w ciągu HTML możemy włączyć instrukcję ng-powtórz o którym wspomnieliśmy, zobaczmy następujący kod:

 var studenci = [{imię: 'María Rojo', id: '1'}, {imię: 'Manolo Rodriguez', id: '2'}, {imię: 'Joao Pinto', id: '3'}]; function StudentListController ($zakres) {$zakres.students = studenci; } 

Tutaj zdefiniowaliśmy listę uczniów, a następnie definiujemy kontroler, za pomocą którego przekazujemy wspomnianą listę do $ zakres z kontroler, teraz musimy napisać kod HTML:

 
 
 {{nazwa studenta}}

Tutaj widzimy, że definiujemy naszą listę jako kontrolera AngularJS a wraz z nim $ zakres wspomnianego kontrolera pozwala nam uzyskać dostęp do listy uczniów, a następnie używamy ng-powtórz z informacją, że zamierzasz utworzyć ucznia dla każdego elementu listy uczniów i wreszcie w ramach

tworzymy kotwicę, która przenosi nas w inne miejsce w aplikacji. Zobaczmy następujący obraz, jak to wygląda w naszej przeglądarce:

Funkcja łączenia ()Inną rzeczą, którą możemy zrobić, jest włączenie nowych elementów do listy, do tego mamy funkcję splot ()Jeśli np. wkomponujemy go w przycisk dodający nowych uczniów, automatycznie zobaczymy zmianę, dzięki temu, że AngularJS Daje nam to odrobinę odświeżenia dokumentu w czasie rzeczywistym bez konieczności ponownego ładowania strony.
Zobaczmy w poniższym kodzie, jak wyglądałby kontroler, aby dodać ucznia:

 var studenci = [{imię: 'María Rojo', id: '1'}, {imię: 'Manolo Rodriguez', id: '2'}, {imię: 'Joao Pinto', id: '3'}]; function StudentListController ($zakres) {$zakres.students = studenci; $ scope.addNew = function () {$ scope.students.splice (1, 0, {name: 'Joaquin Fernandez', id: '4'}); }; } 

Teraz wystarczy wywołać nową funkcję w naszym HTML, możemy to zrobić w następujący sposób:

 {{nazwa studenta}}

Wstawić

Zobaczmy, jak to wygląda w naszej przeglądarce:

Widzimy w jaki sposób dodaliśmy nowego ucznia do listy, jednak za każdym razem, gdy klikniemy w przycisk dodajemy tę samą osobę, to dlatego, że nie zrobiliśmy kodu dynamicznego, ale to już inna sprawa, to co musimy podkreślić to to, że musieliśmy dodać do którego umieściliśmy kontroler, w ten sposób moglibyśmy wkomponować nasz przycisk w $ zakres.
Na tym kończymy ten samouczek, ponieważ widzimy obsługę powtarzających się elementów w AngularJS Jest to dość proste i daje nam możliwość szybkiego tworzenia list, jak widać na przykładach.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt