AgendaEditor: dynamiczne dodawanie pól

Z poprzedniego wpisu mamy formularz, który jest połączony z listą z danymi. Dane są automatycznie przepisywane. Teraz chcielibyśmy, aby nie było ograniczenia co do wierszy. Zróbmy więc tak, żebyśmy mogli dodawać je dynamicznie, podczas działania aplikacji.

Dodawanie wiersza przyciskiem

Pod tabelą dodajmy przycisk:

Skorzystaliśmy z dyrektywy ng-click, której parametrem jest przypisana funkcja addItem() (działa to bardzo podobnie do zwykłej metody onclick w czystym JavaScript).

Przejdźmy zatem do definicji funkcji:

Nie ma tu nic zaskakującego (jeśli ktoś czytał poprzedni wpis). Po prostu na listę dodajemy kolejny obiekt (z wypełnionymi pustymi danymi). Dzięki temu pojawi się kolejny wiersz z polami do wpisywania. Mało pracy, a dobry efekt.

Usuwanie wiersza przyciskiem

Dodajmy kolejną kolumnę w tabeli (czyli komórkę <td> powtarzaną w wierszach <tr>), a w niej przycisk z teksem minus:

Tak samo korzystamy tu z dyrektywy ng-click. Jednak tym razem nie wywołujemy funkcji z kontrolera, tak jak to było w przypadku dodawania wiersza. Jeśli fragment kodu jest mały, możemy go od razu umieścić w tym samym miejscu. Z listy usuwamy ten element, w którym został kliknięty przycisk. Do usuwania z listy w JavaScript służy metoda splice. Pierwszym parametrem jest od którego elementu mają być usuwane, a drugim, ile elementów ma być usuniętych (w tym wypadku jeden). Aby otrzymać numer elementu, w którym jest przycisk, wystarczy skorzystać z $index (jest to dostępne dzięki temu, że ng-repeat tworzy swój własny, „lokalny” scope).

Automatyczne dodawanie wiersza, gdy jest ostatni

Dodajmy jeszcze jedną funkcjonalność, która poprawi komfort z korzystania z aplikacji. AngularJS sam do tego zachęca, gdyż często dobre efekty można uzyskać stosunkowo małym kosztem.

Niech nowy wiersz dodaje się automatycznie, gdy klikniemy ostatni (wtedy będzie wiadomo, że użytkownikowi zaczyna brakować miejsca).

W wierszu tabeli <tr> dodajmy kolejną dyrektywę (po za istniejącą już ng-repeat): ng-click="$last && addItem()". Po kliknięciu wiersza wykona się to co w niej jest umieszczone. Najpierw jest umieszczona właściwość $last (dostępna z lokalnego $scope). Przyjmuje wartość true, jeśli aktualnym (klikniętym) elementem jest ostatni. Wtedy wykonuje się również to co jest po operatorze and oznaczonym podwójnym ampersandem czyli funkcja addItem() (ta sama co po kliknięciu przycisku Add).

Wynik

index.html

controlller.js

Wynik działania:

Kod na GitHub

Kod tej części aplikacji umieściłem na GitHubie w repozytorium agenda-editor w  branchu form-angularjs:
https://github.com/mkczyk/agenda-editor/tree/form-angularjs

 

3 responses on “AgendaEditor: dynamiczne dodawanie pól

Skomentuj Łukasz Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *