Mari kita lihat rendering terlebih dahulu:
Keranjang belanja
1. Kode
Jika Anda tertarik untuk mengetahui cara melakukan ini setelah membaca efek ini, lanjutkan membaca. Tidak banyak, cukup unggah kodenya.
Kode HTML:
<! Doctype html> <html lang = "en" ng-app = "cart"> <head> <meta charset = "utf-8"> <itement> keranjang belanja </iteme> <tautan rel = "stylesheet" href="../scripts/angular-1.4.0-rc.2/docs/components/bootstrap-3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="main.css"></head><body ng-controller="cartCtr"><table ng-show="items.length"> <Caption> AngularJS Implementasi Keranjang </eption> <tr> <th> Nomor seri </th> <th> Informasi Produk </t> <t th> Harga unit (yuan) </t th> <th> kuantitas </t> <th> Jumlah indeks (yuan = "</t th 1}} </td> <td> <a href = "{{{item.linkUrl}}" target = "_ blank"> {{item.title}} </a> </td> <td> {{{{{price | nomor: 2}} </td> "" non = "number NG-disabled = "item.quantity <= 1">-</button> <input type = "text" size = "5" ng-model = "item.quantity" ng-keydown = "quantitykeydown ()" ng -keyup = "quantitykeyup ()"> <tombol type = "tombol" ng-click = "add (" ADD ("ADD (" ADD ("ADD (ADD ()"> <td> {{item.price*item.quantity | Nomor: 2}} </td> <td> <tute type = "tombol" ng-click = "delete (item.id)"> delete </atton> </td> </tr> </Table> <v ng-show = "items. <span> {{getquantites ()}} </span> Total: <span ng-show = "getTotalamount () <15000"> {{getTotalamount () | angka: 2}} </span> <span ng-show = "getTotalamount ()> = 15000"> {span-show = "getTotalamount ()> = 15000"> {span-show = "getTotalamount ()> = 15000"> {span) OFF) </span> <span> ({{getTotalamount () | Nomor: 2}}) </span> </span> <tombol type = "tombol" ng-click = "alertsubmit ()"> checkout </button> </div> <script src = "../ scripts/scripts/angular-1.4.0-rc.2/script script =" ../ skrip/scripts/scripts/angular -.4.0-rc.2/script = ".. src = "app.js"> </script> </body> </html>Kode JS:
/Dibuat oleh WQQ pada 2016/5/25. /var cartModule = angular.module('cart', []);cartModule.controller('cartCtr', ['$scope', function ($scope) { $scope.discount = 0.9; $scope.items = [{id: 10001,title: "The self-cultivation fruit of Web full-stack engineer", price: 40.80,quantity: 2,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.4.cwywjs&id=532166746631"}, {id: 10002, judul: "MacBook Pro 15 inci"}, {id: 10002, judul: "MacBook Pro 15 inci"}, {id: 10002, judul: "MacBook Pro 15 inci"}, {id: 10002, judul: "MacBook Pro 15 inci"}, {id: 10002, judul: "MacBook Pro 15 Inci", {ID: 10002, Title: "MacBook Pro 15 Inci", {ID: 10002, Title: "MacBook:" MacBook: 60 "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.26.cwywjs&id=4577116847"}, {id: 10003, judul: "Surface Book I5 128",} {ID: 10003, judul: "Surface Book I5 128",} {ID: 10003, judul: "Surface Book I5 128", {ID: 10003, judul: "Surface Book I5 128", {ID: 10003, judul: "Surface Book I5 128, 1, Linkurl: "https://detail.tmall.com/item.htm?spm=A1z0D.6639537.1997196601.15.cwywjs&id=525614504276"}, {id: 10004, judul: " 7299.00, Kuantitas: 1, Linkurl: "https://detail.tmall.com/item.htm?spm=A1Z0D.6639537.1997196601.37.cwywjs&id=4154151919814" {{{{ angular.foreach ($ scope.items, function (item, index, array) {if (item.id === id) {item.quantity ++;}})}; // Acara Keydown di kotak input untuk menghindari inputing integer non-positif $ scope.quantitykeydown = function (event) {event = event || window.event. (96 <= keycode && KAPE KUNCI <= 105) || (Event) event = event || window.event; $ scope.items.foreach (function (item, index) {if (item.id == id) {if (konfirmasi ("konfirmasi untuk menghapus item ini dari keranjang belanja?")) {$ scope.items.splice (index, 1); return;}}}})}; angular.foreach ($ scope.items, function (item, index, array) {if (item.quantity) {kuantitas += parseInt (item.quantity);}}); TotalAmount +Item.Quantity * item.price;2. Analisis
Harap abaikan gaya bootstrap. Kami hanya fokus pada sudut. Kode ini sangat sederhana. Mari kita analisis secara singkat:
1. Persiapkan
Pertama, kami mendefinisikan modul cart , cartCtr controller, dan memperkenalkannya ke kode HTML. Pada saat yang sama, kami juga mendefinisikan items array di JS untuk mensimulasikan hal -hal di keranjang belanja.
2. Iterator NG-Repeat
Untuk secara dinamis melintasi data dalam items , kami menggunakan instruksi bawaan ng-repeat dalam sudut, yang dapat dengan mudah melintasi array dan menghasilkan elemen DOM . Di sini kami mengulang untuk menghasilkan 4 <tr> tag:
<tr ng-repeat = "item dalam item">
item adalah objek dalam array items . Apakah Anda merasa bahwa ini adalah loop for/in dalam JS? ~ Jika Anda adalah pengembang .net dan telah menggunakan pisau cukur ASP.NET MVC, Anda akrab dengan operasi elemen DOM yang mulus dalam bahasa lain. Adapun apakah Java dan PHP memiliki sintaks yang sama, saya tidak tahu. Saya seorang pengembang .NET yang bekerja keras.
Iterator NG-Repeat
Kita dapat melihat $index digunakan dalam TD pertama, yang ada di ng-repeat , bukan apa yang kita definisikan. Nilainya adalah indeks item saat ini dalam items , mulai dari 0, jadi kami menggunakan $index+1 sebagai nomor urutan, dan lainnya (mirip dengan item . linkUrl ) mengikat data.
Kami menggunakan {{xxx | angka: 2}} di kolom harga dan jumlah unit. Ini adalah filter dalam sudut. Fungsinya adalah untuk menjaga nilai sebelumnya xxx dua tempat desimal. Adapun jumlahnya, tentu saja kita harus lebih akurat. Saya hanya mengatakan bahwa ini adalah filter, jadi ada hal -hal lain, seperti currency . Anda dapat menambahkan simbol $ di depan XXX untuk mewakili dolar AS, dan Anda dapat menggunakan filter lain di Baidu sendiri.
3. Tambahkan acara
Ada tombol +, - tombol dan hapus tombol pada antarmuka saat ini. Peristiwa ini relatif sederhana. Gunakan ng-click untuk menambahkan acara klik ke elemen. Dengan melewati ID dari produk tertentu, temukan produk, dan tambahkan, kurangi dan hapus produk. Namun, tag ng-disabled ditambahkan ke tombol "-". Menurut namanya, kita dapat dengan mudah memikirkan atribut HTML disabled . Fungsinya adalah menonaktifkan elemen DOM ketika nilai ng-disabled benar. Demikian pula, ng-show yang digunakan di bawah ini adalah sama. Itu ditampilkan saat benar, dan disembunyikan saat salah. Jika itu adalah angka, itu akan secara otomatis dikonversi ke nilai boolean . 0 salah, non-0 benar. Perhatikan bahwa angka negatif juga benar! . Di sini saya akan membiarkan jumlah 1 tidak dikurangi, karena jika jumlahnya lebih kecil, itu dapat dihapus secara langsung ~
Kemudian tambahkan acara ng-keydown ke elemen input sehingga hanya dapat memasukkan tombol panah ↑ → ↓ ←, tombol angka, dan backspace . Kemudian saya mencoba dan memang mencapai tujuan, tetapi saya bisa memasukkan angka seperti "00021", yang jelas tidak memuaskan. Saya melihat keranjang belanja Taobao dan menemukan bahwa ketika 0 dimasukkan di depan, konten kotak teks ini akan secara otomatis menyegarkan, menghapus 0 sebelumnya, jadi saya menambahkan acara ng-keyup :
$ scope.quantitykeyup = function (event) {event = event || window.event; // kompatibel dengan IE8 atau di bawah, target juga var target = event.target || event.srcelement; var keycode = event.keycode; if (48 === KAPE KEY || 96 === KOYCODE) {target.Value = parseInt (target.Value); }}; Pada saat ini, ketika saya memasukkan 0, nilai kotak teks akan secara otomatis menyegarkan. Mengapa tidak menambahkannya ke keydown tetapi menambahkan acara lain? Itu karena nilai target.value masih merupakan nilai asli ketika acara keydown dipicu, dan input kunci tidak termasuk. Setelah keydown , nilainya adalah nilai baru. Pada saat ini, kami kemudian dapat memicu acara keyup untuk mencapai tujuan kami. Kita dapat membandingkan efek keranjang belanja Taobao. Saya pikir pengalaman saya lebih baik dari itu, karena selama itu tidak dimasukkan pada akhirnya, kotak teks akan selalu kehilangan fokus. . .
4. Statistik
Kuantitas statistik adalah untuk secara langsung mengikat metode dan melintasi array untuk mengembalikan nilainya.
Untuk jumlah total, saya membuat desain yang diskon 10% untuk jumlah total 15.000. Gunakan ng-show untuk menyembunyikan jumlah total informasi diskon.
3. Ringkasan
Beberapa array traversal forEach digunakan dalam JS. Metode asli dalam ecmascript5 adalah array.forEach(function(item,index,array){});
Angular juga dienkapsulasi, angular.forEach(array,function(item,index,array){});
Saya menggunakan kedua metode dalam kode, dan saya tidak tahu mana yang memiliki kinerja yang baik. .
Pada titik ini, keranjang belanja telah selesai. Menggunakan ikatan dua arah Angular, Anda dapat dengan cepat mencapai perubahan hubungan dan jumlah hubungan. Saya berharap konten artikel ini akan membantu untuk belajar semua orang dan menggunakan Angular. Jika Anda memiliki pertanyaan, Anda dapat meninggalkan pesan untuk berkomunikasi.