Share
I den første delen av denne Angular-opplæringsserien så du hvordan du kommer i gang med å lage en dagligvareliste med Angular. Du lærte hvordan du lager visningen for dagligvarekomponenten, legger til varer i dagligvarelisten og viser de lagt til elementene.
I denne delen implementerer du funksjonene for å markere ferdige elementer, redigere eksisterende elementer og fjerne tilsatte elementer.
La oss begynne med å klone kildekoden fra første del av opplæringen. Fra terminalen din, skriv inn følgende kode for å klone kildekoden:
git klon https://github.com/royagasthyan/AngularGrocery
Når kildekoden er klonet, naviger til prosjektmappen og installer de nødvendige avhengighetene.
cd AngularGrocery npm installere
Etter at du har installert avhengighetene, kan du starte serveren. Skriv inn følgende kommandoer fra prosjektmappen:
ng tjene
Pek nettleseren din til http: // localhost: 4200 / og du bør ha programmet kjører.
Når du har matvareelementene lagt til i listen, bør du kunne redigere og oppdatere elementene. La oss gi en redigeringsknapp i listelisten som, når den klikkes, vil aktivere redigering av eksisterende elementer.
Endre app.grocery.html kode for å inkludere redigeringsknappen inne i rutenettet.
Lagre endringene ovenfor og start serveren på nytt. Legg inn siden og skriv inn noen elementer, og du vil ha redigeringsknappen for hvert element.
Når brukeren klikker på redigeringsknappen, må du legge til en på-klikk-metode for å håndtere elementet redigere. Endre app.grocery.html å legge til et på-klikk-arrangement for redigering av elementet.
Send meg oppgave til onEdit metode som vist i koden ovenfor for å identifisere elementet som skal redigeres.
Inne i GroceryComponent klassen initialiserer oppgave variabel som vist:
oppgave = navn: ", id: 0;
I ved trykk metode, du vil sjekke for id for å se om det er et eksisterende element eller et nytt element. Endre ved trykk metode som vist:
hvis (this.task.id == 0) this.tasks.push (id: (new Date ()). getTime (), navn: this.task.name);
Som vist har du tildelt et unikt tidsstempel som id til hver oppgave. La oss nå definere onEdit metode for å redigere eksisterende element. Inne i onEdit metode, tilordne passet inn punkt til oppgave variabel.
onEdit (item) this.task = item;
Lagre endringene og start serveren på nytt. Skriv inn et nytt element i dagligvarelisten og klikk på den tilsvarende redigeringsknappen. Du vil kunne redigere og oppdatere oppføringen ved å klikke på OK knapp.
La oss legge til et slettikon for å fjerne eksisterende elementer. Oppdater app.grocery.html fil for å endre HTML-koden som vist:
Her er hvordan komplett app.grocery.html fil ser ut:
Daglig lederliste
- oppgavenavn
Legg til et på-klikk-arrangement til fjernikonet for å slette dagligvarehandelen.
Lagre endringene og start serveren på nytt. Prøv å legge til nye elementer i dagligvarehandler-appen, og du vil ha elementene oppført sammen med slett og rediger ikoner.
For å implementere slettingsfunksjonen må du legge til onDelete metode i app.grocery.ts fil som vist:
onDelete (item) // Slett funksjonalitet vil være her
Når brukeren klikker på slettikonet, må du sjekke varen id mot varemerkelisten og fjern oppføringen fra oppgaver liste. Her er hvordan onDelete metoden ser ut:
onDelete (item) for (var i = 0; i < this.tasks.length; i++) if(item.id == this.tasks[i].id) this.tasks.splice(i,1); break;
Som vist i ovennevnte kode, har du iterert oppgaver liste og sjekket det mot det klikket elementet id. Hvis det matchet elementet i oppgaver liste, den er fjernet ved hjelp av skjøt metode.
Lagre endringene ovenfor og start serveren på nytt. Legg til noen elementer i dagligvarehandleren. Det vil bli lagt til med slett og rediger ikoner til oppgavelisten. Prøv å klikke på fjernikonet, og elementet blir slettet fra elementlisten.
La oss legge til funksjonaliteten for å finne ut elementene som er lagt til i listen. Når brukeren er ferdig med oppgavene i dagligvareleder, bør det være mulig å slå ut de fullførte oppgavene. For å spore de nye og fullførte oppgavene, legg til en ny variabel streik til oppgaveinformasjonen.
Endre ved trykk metode for å inkludere den nye streik variabel som vist:
onClick () if (this.task.id == 0) this.tasks.push (id: (ny dato ()). getTime (), navn: this.task.name, streik: false); this.task = name: ", id: 0;
Legg til en ny klasse som heter streik i src / style.css fil som ville slå ut varen.
.streik text-decoration: line-through;
Inkluder et på-klikk-arrangement på elementet for å veksle streik variabel i elementvariabelen. Du søker på streik klasse til elementene basert på den boolske verdien av streik variabel. Som standard vil det være feil. Her er onStrike metode for å bytte streikvariabler verdien:
onStrike (element) for (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;
Som vist i den ovennevnte metoden, gjenspeiler du gjennom listen over elementer. Når elementet er funnet, bytter du streikverdien.
Basert på streik variabel, må du bruke klassen streik til oppgave navn span. Slik ser det ut:
Accentsconagua
oppgavenavn Som vist har du brukt ngClass direktiv for å bruke klassen streik til spenningselementet hvis task.strike verdien er ekte.
Lagre endringene ovenfor og start serveren på nytt. Legg til elementene i listen og klikk på det lagt til. Når du har klikket, blir elementet slått ut som forventet.
I denne veiledningen så du hvordan du oppdaterer, sletter og merker oppgaven som fullført i dagligvareprogrammet ved hjelp av Angular. Jeg håper du likte opplæringen. Gi meg beskjed om dine tanker i kommentarene nedenfor.
JavaScript har blitt et av de de facto språkene som fungerer på nettet. Det er ikke uten sine lærekurver, og det er nok av rammer og biblioteker for å holde deg opptatt også. Hvis du leter etter flere ressurser for å studere eller bruke i arbeidet ditt, sjekk ut hva vi har tilgjengelig på Envato-markedet.
Å, og ikke glem at kildekoden fra denne opplæringen er tilgjengelig på GitHub.
