Share
In het eerste deel van deze serie Angular-tutorials zag je hoe je aan de slag moest gaan met het maken van een Grocery List Manager met Angular. U hebt geleerd hoe u de weergave voor het onderdeel Kruidenierswaren maakt, items aan de boodschappenlijst toevoegt en de toegevoegde items weergeeft.
In dit deel implementeert u de functies om voltooide items te markeren, bestaande items te bewerken en toegevoegde items te verwijderen.
Laten we beginnen door de broncode uit het eerste deel van de zelfstudie te klonen. Geef vanaf je terminal de volgende code op om de broncode te klonen:
git clone https://github.com/royagasthyan/AngularBrochure
Nadat de broncode is gekloond, navigeert u naar de projectmap en installeert u de vereiste afhankelijkheden.
cd AngularGrocery npm installeren
Na het installeren van de afhankelijkheden, kunt u de server opstarten. Typ de volgende opdrachten in de projectmap:
ng serveren
Richt uw browser op http: // localhost: 4200 / en laat de applicatie draaien.
Zodra u de kruidenierswarenitems aan de lijst hebt toegevoegd, zou u de punten moeten kunnen uitgeven en bijwerken. Laten we een knop voor bewerken in het lijstraster aanbieden die, wanneer erop wordt geklikt, het bewerken van bestaande items inschakelt.
Wijzig de app.grocery.html code om de knop Bewerken in het raster op te nemen.
Sla de bovenstaande wijzigingen op en start de server opnieuw. Laad de pagina en voer een paar items in en u heeft de knop Bewerken voor elk item.
Wanneer de gebruiker op de knop Bewerken klikt, moet u een klikmethode toevoegen om het bewerken van het item af te handelen. Wijzig de app.grocery.html om een on-click-gebeurtenis toe te voegen om het item te bewerken.
Geef de taak naar de onEdit methode zoals weergegeven in de bovenstaande code om het item te identificeren dat moet worden bewerkt.
Binnen in de GroceryComponent klasse initialiseer de taak scoopvariabele zoals getoond:
taak = naam: ", id: 0;
In de bij klikken methode, zult u controleren voor de ID kaart om te zien of het een bestaand item of een nieuw item is. Wijzig de bij klikken methode zoals getoond:
if (this.task.id == 0) this.tasks.push (id: (new Date ()). getTime (), name: this.task.name);
Zoals te zien, hebt u een unieke tijdstempel toegewezen als ID kaart voor elke taak. Laten we nu de definiëren onEdit methode om het bestaande item te bewerken. Binnen in de onEdit methode, wijs de doorgegeven informatie toe item naar de taak veranderlijk.
onEdit (item) this.task = item;
Sla de wijzigingen op en start de server opnieuw op. Voer een nieuw item in de boodschappenlijst in en klik op de bijbehorende knop Bewerken. U kunt het item bewerken en bijwerken door op de knop te klikken OK knop.
Laten we een verwijderpictogram toevoegen om de bestaande items te verwijderen. Werk het app.grocery.html bestand om de HTML-code te wijzigen zoals getoond:
Hier is hoe de complete app.grocery.html bestand ziet er:
Manager boodschappenlijst
- Opdrachtnaam
Voeg een aanklikgebeurtenis toe aan het verwijderpictogram om het kruidenierswarenitem te verwijderen.
Sla de wijzigingen op en start de server opnieuw op. Probeer nieuwe items aan de supermarktmanager-app toe te voegen en de items worden weergegeven, samen met de pictogrammen voor verwijderen en bewerken.
Om de verwijderfunctie te implementeren, moet u de OnDelete methode in de app.grocery.ts bestand zoals getoond:
onDelete (item) // Verwijder functionaliteit zal hier zijn
Zodra de gebruiker op het pictogram voor verwijderen klikt, moet u het item aanvinken ID kaart tegen de boodschappenlijst en verwijder de invoer uit de taken lijst. Hier is hoe het OnDelete methode lijkt:
onDelete (item) for (var i = 0; i < this.tasks.length; i++) if(item.id == this.tasks[i].id) this.tasks.splice(i,1); break;
Zoals te zien is in de bovenstaande code, hebt u de taken lijst en controleerde het met het aangeklikte item ID kaart. Als het overeenkomt met het item in de taken lijst, wordt deze verwijderd met behulp van de verbinding methode.
Sla de bovenstaande wijzigingen op en start de server opnieuw. Voeg een paar items toe aan de boodschappenlijstmanager. Het wordt toegevoegd met de pictogrammen voor verwijderen en bewerken aan het takenlijstraster. Klik op het verwijderpictogram en het item wordt verwijderd uit de lijst met items.
Laten we de functionaliteit toevoegen om de items toe te voegen die aan de lijst zijn toegevoegd. Zodra de gebruiker klaar is met de taken in de boodschappenlijstmanager, zou het mogelijk moeten zijn om de voltooide taken te verwijderen. Om de nieuwe en voltooide taken bij te houden, voegt u een nieuwe variabele toe staking naar de taakinformatie.
Wijzig de bij klikken methode om het nieuwe op te nemen staking variabele zoals getoond:
onClick () if (this.task.id == 0) this.tasks.push (id: (new Date ()). getTime (), naam: this.task.name, strike: false); this.task = name: ", id: 0;
Voeg een nieuwe klasse toe genaamd staking in de src / style.css bestand dat het item zou verwijderen.
.staking text-decoration: line-through;
Voeg een aanklikgebeurtenis toe aan het item om het te wisselen staking variabele in de variabele items. Je gaat de. Toepassen staking class to the items op basis van de Booleaanse waarde van de staking variabel. Het is standaard false. Hier is de in staking methode om de waarde van strike variables te schakelen:
onStrike (item) 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;
Zoals te zien in de bovenstaande methode, doorloopt u de lijst met items. Zodra het item is gevonden, schakelt u de aanvalswaarde in.
Gebaseerd op de staking variabele, je moet de klas toepassen staking tot de naam van de taak. Hier is hoe het eruit ziet:
Accentsconagua
Opdrachtnaam Zoals je hebt gezien, heb je de ngClass richtlijn om de klasse toe te passen staking naar het spanelement als het task.strike waarde is waar.
Sla de bovenstaande wijzigingen op en start de server opnieuw. Voeg de items toe aan de lijst en klik op het toegevoegde item. Eenmaal erop geklikt, wordt het item zoals verwacht verwijderd.
In deze zelfstudie hebt u gezien hoe u de taak als voltooid in de app Supermarktbeheer met Angular kunt bijwerken, verwijderen en markeren. Ik hoop dat je de tutorial leuk vond. Laat me je gedachten weten in de reacties hieronder.
JavaScript is een van de de facto talen geworden om op het web te werken. Het is niet zonder zijn leercurven, en er zijn ook genoeg kaders en bibliotheken om je bezig te houden. Als u op zoek bent naar extra bronnen om te studeren of te gebruiken in uw werk, kijk dan wat we beschikbaar hebben op de Envato-marktplaats.
Oh, en vergeet niet dat de broncode van deze tutorial beschikbaar is op GitHub.
