Rumah >hujung hadapan web >tutorial js >Meningkatkan Pengurusan Projek dalam Pengurus Senarai Barangan Runcit Berasaskan Sudut: Bahagian 2
Dalam bahagian pertama siri tutorial Angular ini, anda mempelajari cara mula membuat pengurus senarai runcit menggunakan Angular. Anda mempelajari cara membuat paparan komponen Barangan Runcit, menambah item pada senarai runcit dan memaparkan item yang ditambahkan.
Dalam bahagian ini, anda akan melaksanakan fungsi menanda projek yang telah siap, mengedit projek sedia ada dan memadamkan projek yang ditambah.
Mari mulakan dengan mengklonkan kod sumber untuk bahagian pertama tutorial ini. Dalam terminal anda, tulis kod berikut untuk mengklon kod sumber:
git clone https://github.com/royagasthyan/AngularGrocery
Selepas mengklonkan kod sumber, navigasi ke folder projek dan pasang kebergantungan yang diperlukan.
cd AngularGrocery npm install
Selepas memasang dependencies, anda akan dapat memulakan pelayan. Dari folder projek, masukkan arahan berikut:
ng serve
Arahkan pelayar anda ke http://localhost:4200/ dan aplikasi sepatutnya berjalan.
Selepas anda menambah barangan runcit pada senarai anda, anda sepatutnya boleh mengedit dan mengemas kininya. Mari sediakan butang edit dalam grid senarai, yang apabila diklik akan membolehkan pengeditan item sedia ada.
Ubah suai kod app.grocery.html
untuk memasukkan butang edit dalam grid. app.grocery.html
代码以在网格内包含编辑按钮。
<span class="glyphicon glyphicon-pencil floatright"></span>
保存以上更改并重新启动服务器。加载页面并输入一些项目,您将看到每个项目的编辑按钮。
当用户单击编辑按钮时,您需要添加一个 on click 方法来处理项目编辑。修改 app.grocery.html
添加用于编辑项目的点击事件。
<span (click)="onEdit(task)" class="glyphicon glyphicon-pencil floatright"></span>
将 task
传递给 onEdit
方法(如上面代码所示)来标识要编辑的项目。
在 GroceryComponent
类中初始化 task
范围变量,如下所示:
task = { name: '', id: 0 };
在 onClick
方法中,您将检查 id
以查看它是现有项目还是新项目。修改 onClick
方法,如下所示:
if(this.task.id == 0){ this.tasks.push({id: (new Date()).getTime(),name: this.task.name}); }
如图所示,您已为每个任务分配了一个唯一的时间戳,即 id
。现在让我们定义 onEdit
方法来编辑现有项目。在 onEdit
方法中,将传入的 item
赋值给 task
变量。
onEdit(item){ this.task = item; }
保存更改并重新启动服务器。在购物清单中输入新商品,然后单击相应的编辑按钮。您可以通过单击 OK
按钮来编辑和更新该条目。
让我们添加一个删除图标来删除现有的项目。更新 app.grocery.html
文件,修改 HTML 代码,如下所示:
<span class="glyphicon glyphicon-remove floatright paddingLeft"></span>
以下是完整的 app.grocery.html
文件的外观:
Grocery list manager
- {{ task.name }} <span class="glyphicon glyphicon-remove floatright paddingLeft"></span> <span (click)="onEdit(task)" class="glyphicon glyphicon-pencil floatright"></span>
向删除图标添加点击事件以删除杂货。
<span (click)="onDelete(task)" class="glyphicon glyphicon-remove floatright paddingLeft"></span>
保存更改并重新启动服务器。尝试向杂货管理应用程序添加新商品,您将看到这些商品以及删除和编辑图标。
要实现删除功能,需要在 onDelete
方法= "inline">app.grocery.ts 文件如图:
onDelete(item){ // Delete functionality will be here }
用户单击删除图标后,您需要根据杂货项目列表检查项目 id
并从 tasks
列表中删除该条目。以下是 onDelete
方法的外观:
onDelete(item){ for(var i = 0;i < this.tasks.length; i++){ if(item.id == this.tasks[i].id){ this.tasks.splice(i,1); break; } } }
如上面的代码所示,您已经迭代了 tasks
列表,并根据单击的项目 id
对其进行了检查。如果它与 tasks
列表中的项目匹配,则使用 splice
方法将其删除。
保存以上更改并重新启动服务器。将一些商品添加到杂货清单管理器中。它将与删除和编辑图标一起添加到任务列表网格中。尝试单击删除图标,该项目将从项目列表中删除。
让我们添加删除添加到列表中的项目的功能。一旦用户完成了购物清单管理器中的任务,就应该可以删除已完成的任务。要跟踪新任务和已完成的任务,请将新变量 strike
添加到任务信息中。
修改 onClick
方法以包含新的 strike
onClick(){ if(this.task.id == 0){ this.tasks.push({id: (new Date()).getTime(),name: this.task.name, strike: false}); } this.task = { name: '', id: 0 }; }Simpan perubahan di atas dan mulakan semula pelayan. Muatkan halaman dan masukkan beberapa item, anda akan melihat butang edit untuk setiap item. #🎜🎜# #🎜🎜##🎜🎜##🎜🎜#Anda perlu menambah kaedah klik untuk mengendalikan penyuntingan item apabila pengguna mengklik butang edit. Ubah suai
app.grocery.html
untuk menambah acara klik untuk mengedit item. #🎜🎜#
.strike{ text-decoration:line-through; }#🎜🎜# Hantar
task
kepada kaedah onEdit
(seperti yang ditunjukkan dalam kod di atas) untuk mengenal pasti item yang hendak diedit. #🎜🎜#
#🎜🎜#Mulakan pembolehubah skop task
dalam kelas GroceryComponent
seperti berikut: #🎜🎜#
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; } } }#🎜🎜#Dalam kaedah
onClick
anda akan menyemak id
untuk melihat sama ada ia item sedia ada atau yang baharu. Ubah suai kaedah onClick
seperti berikut: #🎜🎜#
<span (click)="onStrike(task)" [ngClass]="{'strike': task.strike}"> {{ task.name }} </span>#🎜🎜#Seperti yang ditunjukkan dalam gambar, anda telah memberikan setiap tugasan cap masa yang unik, iaitu
id
. Sekarang mari kita takrifkan kaedah onEdit
untuk mengedit item sedia ada. Dalam kaedah onEdit
, tetapkan item
yang masuk kepada pembolehubah task
. #🎜🎜#
rrreee
#🎜🎜#Simpan perubahan dan mulakan semula pelayan. Masukkan item baharu dalam senarai beli-belah anda dan klik butang edit yang sepadan. Anda boleh mengedit dan mengemas kini entri ini dengan mengklik butang OK
. #🎜🎜#
#🎜🎜##🎜🎜##🎜🎜#Padam Barang Runcit#🎜🎜#
#🎜🎜# Mari tambah ikon padam untuk memadam item sedia ada. Kemas kini fail app.grocery.html
dan ubah suai kod HTML seperti berikut: #🎜🎜#
rrreee
#🎜🎜#Beginilah rupa fail app.grocery.html
yang lengkap: #🎜🎜#
rrreee
#🎜🎜# Tambah acara klik untuk memadam ikon untuk memadamkan barangan runcit. #🎜🎜#
rrreee
#🎜🎜#Simpan perubahan dan mulakan semula pelayan. Cuba tambah item baharu pada apl pengurusan runcit dan anda akan melihat item ini bersama-sama dengan padam dan edit ikon. #🎜🎜#
#🎜🎜##🎜🎜##🎜🎜#Untuk melaksanakan fungsi padam, anda perlu menambah onDelete
method="inline">app.grocery.ts dalam Fail adalah seperti yang ditunjukkan dalam gambar: #🎜🎜#
rrreee
#🎜🎜# Selepas pengguna mengklik ikon padam, anda perlu menyemak item <code class="inline">id
pada senarai barangan runcit dan memadamkannya daripada tasks
list Entri ini. Beginilah rupa kaedah onDelete
: #🎜🎜#
rrreee
#🎜🎜#Seperti yang ditunjukkan dalam kod di atas, anda telah mengulangi senarai tasks
dan berdasarkan item yang diklik id
Ia telah diperiksa. Jika ia sepadan dengan item dalam senarai tasks
, gunakan kaedah splice
untuk mengalih keluarnya. #🎜🎜#
#🎜🎜#Simpan perubahan di atas dan mulakan semula pelayan. Tambahkan beberapa item pada pengurus senarai runcit. Ia akan ditambahkan pada grid senarai tugasan bersama-sama dengan ikon padam dan edit. Cuba klik ikon padam dan item akan dialih keluar daripada senarai item. #🎜🎜#
#🎜🎜#Tandai barangan runcit sebagai lengkap #🎜🎜#
#🎜🎜# Mari tambahkan keupayaan untuk memadam item yang ditambahkan pada senarai. Sebaik sahaja pengguna menyelesaikan tugasan dalam pengurus senarai beli-belah, tugasan yang telah siap itu boleh dipadamkan. Untuk menjejak tugas baharu dan selesai, tambahkan pembolehubah baharu strike
pada maklumat tugas. #🎜🎜#
#🎜🎜#Ubah suai kaedah onClick
untuk memasukkan pembolehubah strike
baharu seperti berikut: #🎜🎜#
onClick(){ if(this.task.id == 0){ this.tasks.push({id: (new Date()).getTime(),name: this.task.name, strike: false}); } this.task = { name: '', id: 0 }; }
在 src/style.css
文件中添加一个名为 strike
的新类,该类将删除该项目。
.strike{ text-decoration:line-through; }
在项目上包含单击事件,以切换 items 变量中的 strike
变量。您将根据 strike
变量的布尔值将 strike
类应用于项目。默认情况下,它将为 false。以下是用于切换罢工变量值的 onStrike
方法:
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; } } }
如上面的方法所示,您将迭代项目列表。找到该项目后,您可以切换罢工值。
基于 strike
变量,您需要将类 strike
应用到任务名称范围。其外观如下:
<span (click)="onStrike(task)" [ngClass]="{'strike': task.strike}"> {{ task.name }} </span>
如图所示,如果 task.strike
值为 ngClass
指令将类 strike
应用于 span 元素class="inline">true
保存以上更改并重新启动服务器。将项目添加到列表中,然后单击添加的项目。单击后,该项目将按预期被删除。
在本教程中,您了解了如何使用 Angular 在杂货店管理应用中更新、删除任务并将任务标记为完成。我希望您喜欢本教程。请在下面的评论中告诉我您的想法。
JavaScript 已成为事实上的网络工作语言之一。它并非没有学习曲线,而且还有大量的框架和库可以让您忙碌起来。如果您正在寻找其他资源来学习或在工作中使用,请查看我们在 Envato 市场中提供的资源。
哦,不要忘记本教程的源代码可以在 GitHub 上找到。
Atas ialah kandungan terperinci Meningkatkan Pengurusan Projek dalam Pengurus Senarai Barangan Runcit Berasaskan Sudut: Bahagian 2. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!