Share
În prima parte a acestei serii de tutorial angular, ați văzut cum să începeți să creați un manager de liste de produse alimentare utilizând unghiular. Ați învățat cum să creați vizualizarea pentru Componenta alimentară, adăugând elemente în lista de produse alimentare și afișând elementele adăugate.
În această parte, veți implementa funcțiile pentru a marca articole finalizate, pentru a edita elementele existente și pentru a elimina elementele adăugate.
Să începem prin clonarea codului sursă din prima parte a tutorialului. Din terminalul dvs., scrieți în următorul cod pentru a clona codul sursă:
git clone https://github.com/royagasthyan/AngularGrocery
Odată ce codul sursă a fost clonat, navigați la dosarul proiectului și instalați dependențele necesare.
cd AngularGrocery npm instalare
După instalarea dependențelor, veți putea să porniți serverul. Din dosarul proiectului, introduceți următoarele comenzi:
ng servi
Punctați browserul la http: // localhost: 4200 / și ar trebui să aveți aplicația să ruleze.
Odată ce ați adăugat articolele de băcănie în listă, ar trebui să puteți edita și actualiza elementele. Să furnizăm un buton de editare în grila de afișare care, când se face clic, va permite editarea elementelor existente.
Modificați app.grocery.html cod pentru a include butonul de editare din interiorul grila.
Salvați modificările de mai sus și reporniți serverul. Încărcați pagina și introduceți câteva elemente și veți avea butonul de editare pentru fiecare element.
Când utilizatorul face clic pe butonul de editare, trebuie să adăugați o metodă pe clic pentru a gestiona editarea elementului. Modificați app.grocery.html pentru a adăuga un eveniment pe clic pentru editarea elementului.
Treceți sarcină la onEdit așa cum se arată în codul de mai sus pentru a identifica elementul care urmează să fie editat.
În interiorul GroceryComponent clasa inițializează sarcină variabila de sferă după cum se arată:
sarcină = nume: ", id: 0;
În onClick metoda, veți verifica id pentru a vedea dacă este un articol existent sau un element nou. Modificați onClick după cum se arată:
dacă (this.task.id == 0) this.tasks.push (id: (nouă dată ()). getTime (), name: this.task.name);
Așa cum ați văzut, ați atribuit o ștampilă unică de timp ca id la fiecare sarcină. Acum, să definim onEdit pentru a edita elementul existent. În interiorul onEdit metodă, alocați-le articol la sarcină variabil.
onEdit (element) this.task = item;
Salvați modificările și reporniți serverul. Introduceți un element nou în lista de produse alimentare și faceți clic pe butonul de editare corespunzător. Veți putea edita și actualiza înregistrarea făcând clic pe O.K buton.
Să adăugăm o pictogramă ștergere pentru a elimina elementele existente. Actualizați app.grocery.html fișier pentru a modifica codul HTML după cum se arată:
Iată cum este complet app.grocery.html file looks:
Managerul listei de produse alimentare
- task.name
Adăugați un eveniment pe clic pe pictograma eliminare pentru a șterge elementul alimentar.
Salvați modificările și reporniți serverul. Încercați să adăugați elemente noi în aplicația Manager alimentar și veți avea elementele listate împreună cu pictogramele de ștergere și editare.
Pentru a implementa funcția de ștergere, trebuie să adăugați onDelete metodă în app.grocery.ts fișier după cum se arată:
onDelete (element) // Șterge funcționalitatea va fi aici
Odată ce utilizatorul dă clic pe pictograma de ștergere, trebuie să verificați elementul id din lista de produse alimentare și eliminați intrarea din sarcini listă. Iată cum onDelete metoda arată:
onDelete (element) pentru (var i = 0; i < this.tasks.length; i++) if(item.id == this.tasks[i].id) this.tasks.splice(i,1); break;
După cum se vede în codul de mai sus, ați repetat sarcini afișați-l și verificați-l în raport cu elementul clicat id. Dacă se potrivește cu elementul din sarcini listă, este eliminată utilizând lipitură metodă.
Salvați modificările de mai sus și reporniți serverul. Adăugați câteva elemente la managerul listei cu produse alimentare. Acesta va fi adăugat cu ștergerea și modificarea pictogramelor în grila listei de sarcini. Încercați să faceți clic pe pictograma eliminare și elementul va fi șters din lista de articole.
Să adăugăm funcția pentru a elimina elementele adăugate în listă. Odată ce utilizatorul este terminat cu sarcinile din managerul listei de produse alimentare, ar trebui să fie posibilă depășirea sarcinilor finalizate. Pentru a urmări sarcinile noi și complete, adăugați o nouă variabilă grevă la informațiile despre sarcină.
Modificați onClick metodă pentru a include noul grevă variabilă după cum se arată:
onClick () if (this.task.id == 0) this.tasks.push (id: (noua dată ()). getTime (), nume: this.task.name, grevă: false); aceasta.task = nume: ", id: 0;
Adăugați o nouă clasă numită grevă în src / style.css fișier care ar lovi elementul.
.grevă text-decoration: line-through;
Includeți un eveniment pe clic pe element pentru a comuta grevă variabilă în variabila elementelor. Veți aplica grevă clasă la elementele bazate pe valoarea booleană a grevă variabil. Implicit, acesta va fi fals. Aici este în grevă pentru a comuta valoarea variabilelor de grevă:
onStrike (element) pentru (var i = 0; i < this.tasks.length; i++) if(item.id == this.tasks[i].id) if(this.tasks[i].strike) this.tasks[i].strike = false; else this.tasks[i].strike = true; break;
Așa cum se vede în metoda de mai sus, repetați prin lista elementelor. Odată ce elementul este găsit, comutați valoarea de grevă.
Bazat pe grevă variabilă, trebuie să aplicați clasa grevă la intervalul de nume al sarcinii. Iată cum arată:
Accentsconagua
task.name Așa cum ați văzut, ați folosit ngClass directivă pentru aplicarea clasei grevă la elementul de acoperire dacă task.strike valoarea este Adevărat.
Salvați modificările de mai sus și reporniți serverul. Adăugați elementele în listă și faceți clic pe elementul adăugat. După ce ați făcut clic, elementul va fi eliminat conform așteptărilor.
În acest tutorial, ați văzut cum să actualizați, să ștergeți și să marcați sarcina ca fiind completă în aplicația Manager alimentar folosind aplicația Angular. Sper că ți-a plăcut tutorialul. Lăsați-mă să vă cunosc gândurile în comentariile de mai jos.
JavaScript a devenit una dintre limbile de facto de lucru pe web. Nu este fără curbele sale de învățare, și există o mulțime de cadre și biblioteci pentru a vă menține ocupați. Dacă sunteți în căutarea unor resurse suplimentare pentru a studia sau a utiliza în munca dvs., verificați ce avem la dispoziție pe piața Envato.
Oh, și nu uitați că codul sursă din acest tutorial este disponibil pe GitHub.
