Share
Nella prima parte di questa serie di tutorial Angular, è stato illustrato come iniziare a creare un Gestore elenchi di prodotti alimentari utilizzando Angular. Hai imparato come creare la vista per il componente Grocery, aggiungere articoli alla lista della spesa e visualizzare gli articoli aggiunti.
In questa parte, implementerai le funzionalità per contrassegnare gli elementi completati, modificare gli elementi esistenti e rimuovere gli elementi aggiunti.
Iniziamo clonando il codice sorgente dalla prima parte del tutorial. Dal tuo terminale, scrivi il seguente codice per clonare il codice sorgente:
git clone https://github.com/royagasthyan/AngularGrocery
Una volta clonato il codice sorgente, accedere alla cartella del progetto e installare le dipendenze richieste.
cd AngularGrocery npm install
Dopo aver installato le dipendenze, sarai in grado di avviare il server. Dalla cartella del progetto, digitare i seguenti comandi:
ng servire
Puntare il browser su http: // localhost: 4200 / e si dovrebbe avere l'applicazione in esecuzione.
Dopo aver aggiunto gli articoli della spesa alla lista, dovresti essere in grado di modificare e aggiornare gli articoli. Forniamo un pulsante di modifica nella griglia di elenco che, una volta cliccato, consentirà la modifica di elementi esistenti.
Modifica il app.grocery.html codice per includere il pulsante di modifica all'interno della griglia.
Salvare le modifiche precedenti e riavviare il server. Carica la pagina e inserisci alcuni elementi e avrai il pulsante di modifica per ogni oggetto.
Quando l'utente fa clic sul pulsante di modifica, è necessario aggiungere un metodo su clic per gestire la modifica dell'elemento. Modifica il app.grocery.html aggiungere un evento su clic per modificare l'elemento.
Passa il compito al onEdit metodo come mostrato nel codice sopra per identificare l'oggetto da modificare.
Dentro il GroceryComponent la classe inizializza il compito scope variabile come mostrato:
compito = nome: ", id: 0;
Nel al clic metodo, verificherete per il id per vedere se si tratta di un oggetto esistente o di un nuovo oggetto. Modifica il al clic metodo come mostrato:
if (this.task.id == 0) this.tasks.push (id: (new Date ()). getTime (), name: this.task.name);
Come visto, hai assegnato un timestamp unico come id ad ogni compito. Ora definiamo il onEdit metodo per modificare l'elemento esistente. Dentro il onEdit metodo, assegnare il passato articolo al compito variabile.
onEdit (item) this.task = item;
Salva le modifiche e riavvia il server. Inserire un nuovo elemento nella lista della spesa e fare clic sul pulsante di modifica corrispondente. Potrai modificare e aggiornare la voce facendo clic su ok pulsante.
Aggiungiamo un'icona di cancellazione per rimuovere gli elementi esistenti. Aggiorna il app.grocery.html file per modificare il codice HTML come mostrato:
Ecco come il completo app.grocery.html aspetto del file:
Gestore della lista della spesa
- task.name
Aggiungi un evento su clic all'icona di rimozione per eliminare l'elemento della spesa.
Salva le modifiche e riavvia il server. Prova ad aggiungere nuovi elementi all'app del gestore della spesa e avrai gli elementi elencati insieme alle icone di eliminazione e modifica.
Per implementare la funzionalità di eliminazione, è necessario aggiungere il onDelete metodo nel app.grocery.ts file come mostrato:
onDelete (item) // La funzionalità di eliminazione sarà qui
Una volta che l'utente fa clic sull'icona di eliminazione, è necessario controllare l'elemento id contro la lista degli articoli della spesa e rimuovere la voce dal compiti elenco. Ecco come onDelete aspetto del metodo:
onDelete (item) for (var i = 0; i < this.tasks.length; i++) if(item.id == this.tasks[i].id) this.tasks.splice(i,1); break;
Come visto nel codice sopra, hai iterato il compiti elencalo e confrontalo con l'elemento cliccato id. Se corrisponde all'elemento nel compiti lista, viene rimosso usando il giuntura metodo.
Salvare le modifiche precedenti e riavviare il server. Aggiungi alcuni articoli al gestore della lista della spesa. Verrà aggiunto con le icone di eliminazione e modifica alla griglia della lista delle attività. Prova a fare clic sull'icona Rimuovi e l'elemento verrà eliminato dall'elenco degli elementi.
Aggiungiamo la funzionalità per eliminare gli elementi aggiunti alla lista. Una volta che l'utente ha terminato le attività nel gestore della lista della spesa, dovrebbe essere possibile cancellare le attività completate. Per tenere traccia delle attività nuove e completate, aggiungi una nuova variabile sciopero alle informazioni sull'attività.
Modifica il al clic metodo per includere il nuovo sciopero variabile come mostrato:
onClick () if (this.task.id == 0) this.tasks.push (id: (new Date ()). getTime (), name: this.task.name, strike: false); this.task = name: ", id: 0;
Aggiungi una nuova classe chiamata sciopero nel src / style.css file che eliminerebbe l'oggetto.
.strike text-decoration: line-through;
Includere un evento su clic sull'elemento per attivare / disattivare sciopero variabile nella variabile items. Stai applicando il sciopero classificare gli oggetti in base al valore booleano di sciopero variabile. Di default, sarà falso. Ecco il in sciopero metodo per commutare il valore delle variabili di avvertimento:
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;
Come visto nel metodo sopra, si scorre l'elenco degli elementi. Una volta trovato l'oggetto, si commuta il valore di strike.
Basato sul sciopero variabile, è necessario applicare la classe sciopero allo span del nome del compito. Ecco come appare:
Accentsconagua
task.name Come visto, hai usato il ngClass direttiva per applicare la classe sciopero all'elemento span se il task.strike il valore è vero.
Salvare le modifiche precedenti e riavviare il server. Aggiungi gli elementi all'elenco e fai clic sull'elemento aggiunto. Una volta cliccato, l'oggetto sarà cancellato come previsto.
In questo tutorial, hai visto come aggiornare, eliminare e contrassegnare l'attività come completa nell'app del gestore di prodotti alimentari utilizzando Angular. Spero ti sia piaciuto il tutorial. Fammi sapere i tuoi pensieri nei commenti qui sotto.
JavaScript è diventato una delle lingue di fatto del lavoro sul web. Non è senza le sue curve di apprendimento, e ci sono un sacco di quadri e librerie per tenerti occupato, pure. Se stai cercando ulteriori risorse da studiare o da utilizzare nel tuo lavoro, dai un'occhiata a ciò che abbiamo a disposizione sul mercato Envato.
Oh, e non dimenticare che il codice sorgente di questo tutorial è disponibile su GitHub.
