Share
Dans la première partie de cette série de didacticiels sur Angular, vous avez appris à créer un gestionnaire de liste d'épicerie en utilisant Angular. Vous avez appris comment créer la vue du composant Épicerie, en ajoutant des éléments à la liste d'épicerie et en affichant les éléments ajoutés..
Dans cette partie, vous allez implémenter les fonctionnalités pour marquer les éléments terminés, modifier les éléments existants et supprimer les éléments ajoutés..
Commençons par cloner le code source à partir de la première partie du didacticiel. Depuis votre terminal, écrivez le code suivant pour cloner le code source:
git clone https://github.com/royagasthyan/AngularGrocery
Une fois le code source cloné, accédez au dossier du projet et installez les dépendances requises..
cd AngularGrocery npm installer
Après avoir installé les dépendances, vous pourrez démarrer le serveur. Dans le dossier du projet, tapez les commandes suivantes:
ng servir
Pointez votre navigateur sur http: // localhost: 4200 / et vous devriez avoir l'application en cours d'exécution.
Une fois les articles d'épicerie ajoutés à la liste, vous devriez pouvoir les modifier et les mettre à jour. Fournissons un bouton d'édition dans la grille de liste qui, une fois cliqué, permettra l'édition d'éléments existants.
Modifier le app.grocery.html code pour inclure le bouton d'édition à l'intérieur de la grille.
Enregistrez les modifications ci-dessus et redémarrez le serveur. Chargez la page et entrez quelques éléments et vous aurez le bouton d'édition pour chaque élément.
Lorsque l'utilisateur clique sur le bouton de modification, vous devez ajouter une méthode sur laquelle cliquer pour gérer la modification de l'élément. Modifier le app.grocery.html ajouter un événement sur clic pour modifier l'élément.
Passe le tâche au onEdit méthode indiquée dans le code ci-dessus pour identifier l'élément à modifier.
À l'intérieur de EpicerieComponent la classe initialise le tâche variable de la portée comme indiqué:
tâche = nom: ", id: 0;
dans le sur clic méthode, vous allez vérifier la identifiant pour voir s'il s'agit d'un élément existant ou d'un nouvel élément. Modifier le sur clic méthode comme indiqué:
if (this.task.id == 0) this.tasks.push (id: (nouvelle Date ()). getTime (), nom: this.task.name);
Comme on le voit, vous avez attribué un horodatage unique comme identifiant à chaque tâche. Définissons maintenant le onEdit méthode pour éditer l'élément existant. À l'intérieur de onEdit méthode, attribuer le passé article au tâche variable.
onEdit (item) this.task = item;
Enregistrez les modifications et redémarrez le serveur. Entrez un nouvel article dans la liste d'épicerie et cliquez sur le bouton d'édition correspondant. Vous pourrez modifier et mettre à jour l’entrée en cliquant sur le bouton D'accord bouton.
Ajoutons une icône de suppression pour supprimer les éléments existants. Mettre à jour le app.grocery.html fichier pour modifier le code HTML comme indiqué:
Voici comment la complète app.grocery.html fichier regarde:
Gestionnaire de liste d'épicerie
- Nom de la tâche
Ajouter un événement au clic à l'icône de suppression pour supprimer l'épicerie.
Enregistrez les modifications et redémarrez le serveur. Essayez d’ajouter de nouveaux articles à l’application d’épicerie et vous obtiendrez les articles énumérés avec les icônes de suppression et de modification..
Pour implémenter la fonctionnalité de suppression, vous devez ajouter le onDelete méthode dans le app.grocery.ts fichier comme indiqué:
onDelete (item) // La fonctionnalité de suppression sera ici
Une fois que l'utilisateur a cliqué sur l'icône de suppression, vous devez vérifier l'élément. identifiant dans la liste des articles d’épicerie et supprimez l’entrée du les tâches liste. Voici comment onDelete la méthode ressemble:
onDelete (item) for (var i = 0; i < this.tasks.length; i++) if(item.id == this.tasks[i].id) this.tasks.splice(i,1); break;
Comme on le voit dans le code ci-dessus, vous avez itéré le les tâches liste et vérifié par rapport à l'élément cliqué identifiant. Si cela correspond à l'élément dans le les tâches liste, il est supprimé en utilisant le épissure méthode.
Enregistrez les modifications ci-dessus et redémarrez le serveur. Ajoutez quelques articles au gestionnaire de la liste d'épicerie. Il sera ajouté avec les icônes de suppression et d’édition à la grille de la liste des tâches. Essayez de cliquer sur l'icône de suppression et l'élément sera supprimé de la liste des éléments..
Ajoutons la fonctionnalité pour supprimer les éléments ajoutés à la liste. Une fois que l'utilisateur a terminé les tâches dans le gestionnaire de liste d'épicerie, il devrait être possible de rayer les tâches terminées. Pour suivre les nouvelles tâches et les tâches terminées, ajoutez une nouvelle variable. la grève aux informations de la tâche.
Modifier le sur clic méthode pour inclure la nouvelle la grève variable comme indiqué:
onClick () if (this.task.id == 0) this.tasks.push (id: (new Date ()). getTime (), name: this.task.name, strike: false); this.task = name: ", id: 0;
Ajouter une nouvelle classe appelée la grève dans le src / style.css fichier qui rayerait l'article.
.strike text-decoration: line-through;
Incluez un événement sur clic sur l'élément pour faire basculer la la grève variable dans la variable items. Vous allez appliquer le la grève classe aux éléments en fonction de la valeur booléenne de la la grève variable. Par défaut, ce sera faux. Voici la en grève méthode pour basculer la valeur des variables de frappe:
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;
Comme indiqué dans la méthode ci-dessus, vous parcourez la liste d'éléments. Une fois que l'élément est trouvé, vous basculez la valeur de frappe.
Basé sur la grève variable, vous devez appliquer la classe la grève au nom de la tâche span. Voici à quoi ça ressemble:
Accentsconagua
Nom de la tâche Comme on le voit, vous avez utilisé le ngClass directive d'appliquer la classe la grève à l'élément span si le task.strike La valeur est vrai.
Enregistrez les modifications ci-dessus et redémarrez le serveur. Ajoutez les éléments à la liste et cliquez sur l'élément ajouté. Une fois cliqué, l'élément sera barré comme prévu.
Dans ce didacticiel, vous avez vu comment mettre à jour, supprimer et marquer la tâche comme étant terminée dans l'application Gestionnaire d'épicerie à l'aide de Angular. J'espère que vous avez apprécié le tutoriel. Faites-moi savoir vos pensées dans les commentaires ci-dessous.
JavaScript est devenu l'un des langages de facto du travail sur le Web. Ce n’est pas sans ses courbes d’apprentissage, et il existe de nombreux cadres et bibliothèques pour vous tenir occupé. Si vous recherchez des ressources supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons à votre disposition sur le marché Envato..
Oh, et n'oubliez pas que le code source de ce tutoriel est disponible sur GitHub.
