Saya mencoba untuk menulis fungsi yang memungkinkan saya untuk menghapus item ketika tombol diklik tetapi saya pikir saya menjadi bingung dengan fungsinya - apakah saya menggunakan $digest
?
HTML & app.js:
<ul ng-repeat="bday in bdays">
<li>
<span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
<form ng-show="editing" ng-submit="editing = false">
<label>Name:</label>
<input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
<label>Date:</label>
<input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
<br/>
<button class="btn" type="submit">Save</button>
<a class="btn" ng-click="remove()">Delete</a>
</form>
</li>
</ul>
$scope.remove = function(){
$scope.newBirthday = $scope.$digest();
};
remove()
ding-click
jalan Anda tidak memiliki konteks. Perlu detail lebih lanjut dalam markup untuk menunjukkan apa yang dihapus dan jika ada di dalamng-repeat
, atau dari mana barang yang dihapus berasal, atau perilaku apa yang Anda inginkanremove()
Jawaban:
Untuk menghapus item, Anda harus menghapusnya dari array dan dapat meneruskan
bday
item ke fungsi hapus Anda di markup. Kemudian di controller cari indeks item dan hapus dari arrayKemudian di controller:
Angular akan secara otomatis mendeteksi perubahan pada
bdays
array dan melakukan pembaruanng-repeat
DEMO: http://plnkr.co/edit/ZdShIA?p=preview
EDIT: Jika melakukan pembaruan langsung dengan server akan menggunakan layanan yang Anda buat menggunakan
$resource
untuk mengelola pembaruan array pada saat yang sama pembaruan serversumber
$index
secara langsung dapat menghasilkan bug jika daftar Anda difilter pada templat. Ini hal template; lebih aman untuk digunakanng-click='remove(bday)'
kemudianarr.splice(arr.indexOf(bday),1);
this is undefined
. Plunker / jsfiddle mungkin?.indexOf(item)
akan mengembalikan -1 jika tidak ditemukan, ini dapat mengakibatkan penghapusan item di akhir array jika Anda tidak memeriksanya.Ini jawaban yang benar:
Dalam jawaban @ charlietfl. Saya pikir itu salah karena Anda lulus
$index
sebagai paramter tetapi Anda menggunakan keinginan sebagai gantinya di controller. Perbaiki saya jika saya salah :)sumber
indexOf
HANYA berfungsi jika IE9 +Jika Anda berada di dalam ng-repeat
Anda bisa menggunakan opsi satu liner
$index
digunakan oleh angular untuk menunjukkan indeks array saat ining-repeat
sumber
Menggunakan
$index
berfungsi dengan sangat baik dalam kasus dasar, dan jawaban @ charlietfl sangat bagus. Tetapi terkadang,$index
itu tidak cukup.Bayangkan Anda memiliki satu array, yang Anda presentasikan dalam dua ng-repeat yang berbeda. Salah satu dari mereka ng-repeat difilter untuk objek yang memiliki properti kebenaran, dan yang lainnya difilter untuk properti palsu. Dua array yang difilter sedang disajikan, yang berasal dari satu array asli. (Atau, jika itu membantu untuk memvisualisasikan: mungkin Anda memiliki satu array orang, dan Anda ingin satu ng-repeat untuk wanita dalam array itu, dan yang lain untuk pria dalam array yang sama .) Tujuan Anda: hapus andal dari array asli, menggunakan informasi dari anggota array yang difilter.
Di setiap array yang difilter, $ index tidak akan menjadi indeks item dalam array asli. Ini akan menjadi indeks dalam sub-array yang difilter . Jadi, Anda tidak akan dapat memberi tahu indeks orang tersebut dalam
people
array asli , Anda hanya akan tahu $ index dariwomen
ataumen
sub-array. Cobalah untuk menghapus menggunakan itu, dan Anda akan memiliki item menghilang dari mana-mana kecuali di mana Anda inginkan. Apa yang harus dilakukan?Jika Anda cukup beruntung menggunakan model data termasuk pengidentifikasi unik untuk setiap objek, kemudian gunakan itu daripada $ indeks, untuk menemukan objek dan
splice
keluar dari array utama. (Gunakan contoh saya di bawah ini, tetapi dengan pengenal unik itu.) Tetapi jika Anda tidak seberuntung itu?Angular sebenarnya menambah setiap item dalam array yang diulang-ulang (dalam array asli dan asli) dengan properti unik yang disebut
$$hashKey
. Anda dapat mencari array asli untuk menemukan kecocokan pada$$hashKey
item yang ingin Anda hapus, dan singkirkan seperti itu.Perhatikan bahwa
$$hashKey
ini adalah detail implementasi, tidak termasuk dalam API yang diterbitkan untuk ng-repeat. Mereka dapat menghapus dukungan untuk properti itu kapan saja. Tapi mungkin juga tidak. :-)Diminta dengan:
EDIT: Menggunakan fungsi seperti ini, yang menekan pada
$$hashKey
alih - alih nama properti khusus model, juga memiliki keuntungan tambahan yang signifikan membuat fungsi ini dapat digunakan kembali di berbagai model dan konteks yang berbeda. Berikan itu dengan referensi array Anda, dan referensi item Anda, dan itu hanya akan berfungsi.sumber
Saya biasanya menulis dengan gaya seperti itu:
Semoga ini bisa membantu Anda harus menggunakan titik (.) Antara $ scope dan [yourArray]
sumber
deleteCount
. Integer yang menunjukkan jumlah elemen array lama untuk dihapus. Jika deleteCount adalah 0, tidak ada elemen yang dihapus. Dalam hal ini, Anda harus menentukan setidaknya satu elemen baru. Jika deleteCount lebih besar dari jumlah elemen yang tersisa dalam array mulai dari awal, maka semua elemen hingga akhir array akan dihapus. Array.prototype.splice () DokumentasiMembangun jawaban yang diterima, ini akan bekerja dengan
ngRepeat
,filter
dan menangani ekspektasi dengan lebih baik:Pengendali:
Melihat:
sumber
implementasi Tanpa Pengendali.
Metode splice () menambah / menghapus item ke / dari array.
indeks : Diperlukan. Integer yang menentukan pada posisi apa untuk menambah / menghapus item, Gunakan nilai negatif untuk menentukan posisi dari akhir array.
howmanyitem (s) : Opsional. Jumlah item yang akan dihapus. Jika diatur ke 0, tidak ada item yang akan dihapus.
item_1, ..., item_n : Opsional. Item baru yang akan ditambahkan ke array
sumber
Saya tidak setuju bahwa Anda harus memanggil metode pada controller Anda. Anda harus menggunakan layanan untuk fungsionalitas aktual apa pun, dan Anda harus menentukan arahan untuk fungsionalitas apa pun untuk skalabilitas dan modularitas, serta menetapkan acara klik yang berisi panggilan ke layanan yang Anda masukkan ke dalam arahan Anda.
Jadi, misalnya, pada HTML Anda ...
Lalu, buat arahan ...
Kemudian dalam layanan Anda ...
Ketika Anda menulis kode dengan benar seperti ini, Anda akan membuatnya sangat mudah untuk menulis perubahan di masa depan tanpa harus merestrukturisasi kode Anda. Ini diatur dengan benar, dan Anda menangani acara klik khusus dengan benar dengan mengikat menggunakan arahan khusus.
Misalnya, jika klien Anda berkata, "hei, sekarang mari kita membuatnya memanggil server dan membuat roti, dan kemudian memunculkan modal." Anda akan dapat dengan mudah pergi ke layanan itu sendiri tanpa harus menambahkan atau mengubah kode metode HTML, dan / atau controller. Jika Anda hanya memiliki satu baris pada controller, Anda akhirnya harus menggunakan layanan, untuk memperluas fungsionalitas ke pengangkatan yang lebih berat yang diminta klien.
Juga, jika Anda membutuhkan tombol 'Hapus' lain di tempat lain, Anda sekarang memiliki atribut direktif ('ng-remove-birthday') Anda dapat dengan mudah menetapkan elemen apa pun pada halaman. Ini sekarang membuatnya modular dan dapat digunakan kembali. Ini akan berguna ketika berhadapan dengan paradigma komponen web HEAVY dari Angular 2.0. Tidak ada controller di 2.0. :)
Selamat Berkembang !!!
sumber
Ini jawaban lain. Saya harap ini akan membantu.
Sumber lengkap ada di sini
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
sumber
jika Anda memiliki ID atau bidang spesifik apa pun di item Anda, Anda dapat menggunakan filter (). aktingnya seperti Where ().
dalam controller:
sumber
dari controller (Fungsi bisa di controller yang sama tetapi lebih suka menyimpannya dalam layanan)
sumber