使用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
AI Hentai Generator
Menjana ai hentai secara percuma.
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 memadam nota Xiaohongshu
Mar 21, 2024 pm 08:12 PM
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;
Adakah benar anda boleh disekat dan dipadamkan pada WeChat dan tidak dapat ditambahkan secara kekal?
Apr 08, 2024 am 11:41 AM
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.
Apakah folder yang ditemui.000? Bolehkah folder yang dijumpai.000 dipadamkan?
Mar 13, 2024 pm 08:52 PM
Dalam proses penggunaan harian komputer, anda mungkin menerima mesej ralat bahawa fail found.000 hilang dan rosak Apakah folder ini dijumpai.000? Bolehkah ia dipadam jika ia tidak berguna lagi? Oleh kerana ramai orang tidak tahu fail ini, izinkan saya memberitahu anda tentang folder yang dijumpai.000 secara terperinci~ 1. Apakah folder yang dijumpai.000 Apabila komputer hilang sebahagian atau sepenuhnya kerana penutupan tidak sah, , anda boleh mencari folder khas bernama "found.000" dan fail dengan sambungan ".chk" yang terkandung di dalamnya dalam direktori yang ditentukan dalam partition sistem. Ini "fo
Pendaraban matriks universal CUDA: dari kemasukan kepada kemahiran!
Mar 25, 2024 pm 12:30 PM
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
Cara mengira penambahan, penolakan, pendaraban dan pembahagian dalam dokumen perkataan
Mar 19, 2024 pm 08:13 PM
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.
Bagaimana untuk memadam keluaran Xiaohongshu? Bagaimana untuk memulihkan selepas pemadaman?
Mar 21, 2024 pm 05:10 PM
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.
Apakah fail hiberfil.sys? Bolehkah hiberfil.sys dipadamkan?
Mar 15, 2024 am 09:49 AM
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
Bagaimana untuk memadam sepenuhnya sejarah sembang TikTok
May 07, 2024 am 11:14 AM
1. Buka apl Douyin, klik [Mesej] di bahagian bawah antara muka dan klik entri perbualan sembang yang perlu dipadamkan. 2. Tekan lama mana-mana rekod sembang, klik [Multiple Select], dan semak rekod sembang yang ingin anda padamkan. 3. Klik butang [Padam] di penjuru kanan sebelah bawah dan pilih [Sahkan pemadaman] dalam tetingkap pop timbul untuk memadam rekod ini secara kekal.
