使用Angular如何实现基本购物车功能
这篇文章主要介绍了Angular实现可删除并计算总金额的购物车功能,涉及AngularJS事件响应、元素遍历与数值运算等相关操作技巧,需要的朋友可以参考下
本文实例讲述了Angular实现可删除并计算总金额的购物车功能。分享给大家供大家参考,具体如下:
先看运行效果:
具体代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net angular可删除与计算总额的购物车</title> <script src="angular.min.js"></script> <style> table{ width: 500px; height: 300px; border-collapse: collapse; text-align: center; } td{ border: 1px solid black; } </style> <script> var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function ($scope) { $scope.goods=[{ gname:"iphone8", num:"3", price:"999" },{ gname: "iphone7", num: "4", price: "599" },{ gname: "iphone6", num: "5", price: "499" },{ gname: "iphone5", num: "6", price: "399" } ]; $scope.allSum=function () { var allPrice=0; for(var i=0;i<$scope.goods.length;i++){ allPrice+=$scope.goods[i].price*$scope.goods[i].num; } return allPrice; }; $scope.remove=function (index) { if(confirm('确定移除此项嘛?')){ $scope.goods.splice(index,1); } if($scope.goods.length==0){ alter('你的购物车为空'); } }; }) </script> </head> <body ng-app="myapp" ng-controller="myCtrl"> <table> <tr> <td colspan="5">你的购物车</td> <tr> <td>商品名称</td> <td>数量</td> <td>单价</td> <td>小计</td> <td>操作</td> </tr> <tr ng-repeat="arr in goods"> <td>{{arr.gname}}</td> <td>{{arr.num}}</td> <td>{{arr.price|currency:"RMB¥"}}</td> <td>{{arr.num*arr.price|currency:"RMB¥"}}</td> <td><button ng-click="remove($index)">删除</button></td> </tr> <tr> <td colspan="5">总金额<span ng-bind="allSum()|currency:'RMB'"></span></td> </tr> </table> </body> </html>
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
Atas ialah kandungan terperinci 使用Angular如何实现基本购物车功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Bagaimana untuk memadamkan nota Xiaohongshu? pandangan! Tutorial penggunaan Xiaohongshu Cara memadam nota Xiaohongshu 1. Mula-mula buka APP Xiaohongshu dan masukkan halaman utama, pilih [Saya] di sudut kanan bawah untuk memasuki kawasan khas 2. Kemudian di kawasan Saya, klik pada halaman nota sebagai ditunjukkan di bawah , pilih nota yang anda mahu padamkan;

Pendaraban Matriks Umum (GEMM) ialah bahagian penting dalam banyak aplikasi dan algoritma, dan juga merupakan salah satu petunjuk penting untuk menilai prestasi perkakasan komputer. Penyelidikan mendalam dan pengoptimuman pelaksanaan GEMM boleh membantu kami lebih memahami pengkomputeran berprestasi tinggi dan hubungan antara perisian dan sistem perkakasan. Dalam sains komputer, pengoptimuman GEMM yang berkesan boleh meningkatkan kelajuan pengkomputeran dan menjimatkan sumber, yang penting untuk meningkatkan prestasi keseluruhan sistem komputer. Pemahaman yang mendalam tentang prinsip kerja dan kaedah pengoptimuman GEMM akan membantu kami menggunakan potensi perkakasan pengkomputeran moden dengan lebih baik dan menyediakan penyelesaian yang lebih cekap untuk pelbagai tugas pengkomputeran yang kompleks. Dengan mengoptimumkan prestasi GEMM

1. Pertama sekali, adalah palsu untuk menyekat dan memadam seseorang secara kekal dan tidak menambahkannya secara kekal. Jika anda ingin menambah pihak lain selepas anda menyekat dan memadamkannya, anda hanya memerlukan persetujuan pihak lain. 2. Jika pengguna menyekat seseorang, pihak yang satu lagi tidak akan dapat menghantar mesej kepada pengguna, melihat kalangan rakan pengguna atau membuat panggilan dengan pengguna. 3. Menyekat tidak bermakna memadamkan pihak lain daripada senarai kenalan WeChat pengguna. 4. Jika pengguna memadamkan pihak lain daripada senarai kenalan WeChat pengguna selepas menyekat mereka, tiada cara untuk pulih selepas pemadaman. 5. Jika pengguna ingin menambah pihak yang satu lagi sebagai rakan semula, pihak yang satu lagi perlu bersetuju dan menambah pengguna itu semula.

WORD adalah pemproses perkataan yang berkuasa Kita boleh menggunakan perkataan untuk mengedit pelbagai teks Dalam jadual Excel, kita telah menguasai kaedah pengiraan penambahan, penolakan dan penggandaan Jadi jika kita perlu mengira penambahan nilai dalam jadual Word. Bagaimana untuk menolak pengganda? Bolehkah saya hanya menggunakan kalkulator untuk mengiranya? Jawapannya sudah tentu tidak, WORD juga boleh melakukannya. Hari ini saya akan mengajar anda cara menggunakan formula untuk mengira operasi asas seperti penambahan, penolakan, pendaraban dan pembahagian dalam jadual dalam dokumen Word. Jadi, hari ini izinkan saya menunjukkan secara terperinci cara mengira penambahan, penolakan, pendaraban dan pembahagian dalam dokumen WORD? Langkah 1: Buka WORD, klik [Jadual] di bawah [Sisipkan] pada bar alat dan masukkan jadual dalam menu lungsur.

Sebagai platform e-dagang sosial yang popular, Xiaohongshu telah menarik sejumlah besar pengguna untuk berkongsi kehidupan harian dan pengalaman membeli-belah mereka. Kadangkala kami mungkin secara tidak sengaja menerbitkan beberapa kandungan yang tidak sesuai, yang perlu dipadamkan dalam masa untuk mengekalkan imej peribadi kami dengan lebih baik atau mematuhi peraturan platform. 1. Bagaimana untuk memadam keluaran Xiaohongshu? 1. Log masuk ke akaun Xiaohongshu anda dan masukkan halaman utama peribadi anda. 2. Di bahagian bawah halaman utama peribadi, cari pilihan "Ciptaan Saya" dan klik untuk masuk. 3. Pada halaman "Ciptaan Saya", anda boleh melihat semua kandungan yang diterbitkan, termasuk nota, video, dsb. 4. Cari kandungan yang perlu dipadamkan dan klik butang "..." di sebelah kanan. 5. Dalam menu pop timbul, pilih pilihan "Padam". 6. Selepas mengesahkan pemadaman, kandungan akan hilang dari laman utama peribadi anda dan halaman awam.

Xiaohongshu ialah platform e-dagang sosial yang popular, dan komen interaktif antara pengguna merupakan kaedah komunikasi yang sangat diperlukan pada platform tersebut. Kadangkala, kami mungkin mendapati ulasan kami telah dipadamkan oleh orang lain, yang boleh mengelirukan. 1. Bagaimanakah saya boleh mendapatkan semula ulasan orang lain yang dipadamkan pada Xiaohongshu? Apabila anda mendapati ulasan anda telah dipadamkan, anda boleh cuba mencari terus siaran atau produk yang berkaitan di platform terlebih dahulu untuk melihat sama ada anda masih boleh menemui ulasan tersebut. Jika ulasan masih dipaparkan selepas dipadamkan, ia mungkin telah dipadamkan oleh pemilik siaran asal Pada masa ini, anda boleh cuba menghubungi pemilik siaran asal untuk bertanya sebab memadam ulasan dan meminta untuk memulihkan ulasan. Jika ulasan telah dipadamkan sepenuhnya dan tidak dapat ditemui pada siaran asal, kemungkinan ia dikembalikan pada platform agak tipis. Anda boleh mencuba cara lain

Baru-baru ini, ramai netizen bertanya kepada editor, apakah itu fail hiberfil.sys? Bolehkah hiberfil.sys mengambil banyak ruang pemacu C dan dipadamkan? Editor boleh memberitahu anda bahawa fail hiberfil.sys boleh dipadamkan. Mari kita lihat butiran di bawah. hiberfil.sys ialah fail tersembunyi dalam sistem Windows dan juga fail hibernasi sistem. Ia biasanya disimpan dalam direktori akar pemacu C, dan saiznya bersamaan dengan saiz memori yang dipasang sistem. Fail ini digunakan apabila komputer sedang hibernasi dan mengandungi data memori sistem semasa supaya ia boleh dipulihkan dengan cepat kepada keadaan sebelumnya semasa pemulihan. Oleh kerana saiznya adalah sama dengan kapasiti memori, ia mungkin mengambil jumlah ruang cakera keras yang lebih besar. hiber

Pembantu pemindahan fail WeChat tersedia untuk setiap pengguna Sesetengah pengguna menggunakannya sebagai memo untuk merekodkan beberapa perkara. Jadi bagaimana untuk memadam sepenuhnya Pembantu Pemindahan Fail WeChat? Izinkan saya memperkenalkannya kepada anda secara terperinci di bawah. Bagaimana untuk memadam sepenuhnya Pembantu Pemindahan Fail WeChat Jawapan: [WeChat]-[Tekan lama Pembantu Pemindahan Fail]-[Padam sembang ini]. Langkah-langkah khusus: 1. Mula-mula buka perisian WeChat Selepas memasuki halaman utama, kami mencari [Pembantu Pemindahan Fail] dan tekan dan tahan 2. Kemudian pop timbul akan ditandakan sebagai belum dibaca, sematkan sembang ke bahagian atas, lakukan tidak memaparkan sembang, dan memadam sembang Di sini Kita boleh klik [Padam sembang ini];
