使用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>上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
以上是使用Angular如何實現基本購物車功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
小紅書筆記怎麼刪除
Mar 21, 2024 pm 08:12 PM
小紅書筆記怎麼刪除?在小紅書APP中是可以編輯筆記的，多數的用戶不知道小紅書筆記如何的刪除，接下來就是小編為用戶帶來的小紅書筆記刪除方法圖文教程，有興趣的用戶快來一起看看吧！小紅書使用教學小紅書筆記怎麼刪除1、先打開小紅書APP進入到主頁面，選擇右下角【我】進入到專區;2、之後在我的專區，點擊下圖所示的筆記頁面，選擇要刪除的筆記;3、進入到筆記頁面，右上角【三個點】;4、最後下方會展開功能欄，點選【刪除】即可完成。
CUDA之通用矩陣乘法：從入門到熟練！
Mar 25, 2024 pm 12:30 PM
通用矩陣乘法（GeneralMatrixMultiplication，GEMM）是許多應用程式和演算法中至關重要的一部分，也是評估電腦硬體效能的重要指標之一。透過深入研究和優化GEMM的實現，可以幫助我們更好地理解高效能運算以及軟硬體系統之間的關係。在電腦科學中，對GEMM進行有效的最佳化可以提高運算速度並節省資源，這對於提高電腦系統的整體效能至關重要。深入了解GEMM的工作原理和最佳化方法，有助於我們更好地利用現代計算硬體的潛力，並為各種複雜計算任務提供更有效率的解決方案。透過對GEMM性能的優
微信拉黑再刪除永久加不上是真的嗎
Apr 08, 2024 am 11:41 AM
1.首先，拉黑再刪除永久加不上是假的，拉黑刪除後想要再加對方，只要對方同意即可。 2.如果用戶將某人封鎖，對方將無法向用戶發送訊息、查看用戶的朋友圈、與用戶通話。 3.封鎖並不意味著將對方從用戶的微信聯絡人清單中刪除。 4.如果用戶在封鎖後又將對方從用戶的微信聯絡人清單中刪除，那麼在刪除後是沒有辦法恢復的。 5.如果用戶想再加入對方為好友，需要對方同意並重新新增使用者。
word文檔怎麼計算加減乘除
Mar 19, 2024 pm 08:13 PM
WORD是一個強大的文字處理器，我們可以利用word進行各種文字的編輯，在Excel表格當中，我們已經熟練了加減乘數的運算方法，那麼如果需要在Word表格裡，計算數值的加減乘數，該如何操作呢，難道只能用計算機計算嗎？答案當然是否定的，WORD也同樣可以完成。今天小編就來教大家如何在Word文件的表格當中，運用公式計算加減乘除等基本運算，一起來學習一下吧。那麼，今天就讓小編具體示範一下，WORD文件怎麼計算加減乘除？第一步：開啟一個WORD,點選工具列【插入】下的【表格】，在下拉式選單當中插入一
小紅書發怎麼刪除？發布刪除怎麼恢復？
Mar 21, 2024 pm 05:10 PM
小紅書作為一個受歡迎的社群電商平台，吸引了大量用戶分享生活點滴和購物心得。有時候我們可能會不經意發布一些不合適的內容，這時候需要及時刪除，這樣可以更好地維護個人形像或遵守平台規定。一、小紅書發布怎麼刪除？ 1.登入小紅書帳號，進入個人首頁。 2.在個人主頁下方，找到「我的創作」選項，點選進入。 3.在「我的創作」頁面，你可以看到所有發布的內容，包括筆記、影片等。 4.找到需要刪除的內容，點選右側的「...」按鈕。 5.在彈出的選單中，選擇“刪除”選項。 6.確認刪除後，該條內容將從你的個人主頁和公開頁面消失
小紅書把別人評論刪了怎麼找回來？把別人留言刪了會有顯示嗎？
Mar 21, 2024 pm 10:46 PM
小紅書作為一款熱門的社群電商平台，用戶之間的互動評論是平台中不可或缺的溝通方式。有時候，我們可能會發現自己的評論被其他人刪除，這種情況可能會讓我們感到困惑。一、小紅書把別人評論刪了怎麼找回來？當發現自己的評論被刪除時，首先可以嘗試在平台上直接搜尋相關的貼文或商品，查看是否還能找到該評論。如果評論被刪除後仍然顯示，那麼可能是被原帖主刪除的，這時候可以嘗試聯絡原帖主，詢問其刪除評論的原因，並要求恢復評論。如果評論已經被完全刪除且無法在原始貼文上找到，那麼在平台上恢復評論的機會相對較小。可以嘗試使用其他途徑
微信檔案傳輸助手怎麼徹底刪除_微信檔案傳輸助手關閉方法介紹
Mar 20, 2024 pm 08:31 PM
微信的文件傳輸助手是每個用戶都有的，有些用戶將它當做成了備忘錄，會記錄一些東西。那麼微信檔案傳輸助手要怎麼徹底刪除呢？下面就讓小編為大家詳細介紹一下吧。微信檔案傳輸助手怎麼徹底刪除答案：【微信】-【長按檔案傳輸助手】-【刪除該聊天】。具體步驟：1、先開啟微信軟體，進入到首頁後我們找到【檔案傳輸助理】長按；2、然後會彈出標為未讀、置頂該聊天、不顯示該聊天、刪除該聊天，在這裡我們點選【刪除該聊天】即可；
hiberfil.sys是什麼檔案？ hiberfil.sys可以刪除嗎？
Mar 15, 2024 am 09:49 AM
最近有很多網友問小編，hiberfil.sys是什麼文件？ hiberfil.sys佔用了大量的C碟空間可以刪除嗎？小編可以告訴大家hiberfil.sys檔是可以刪除的。下面就來看看詳細的內容。 hiberfil.sys是Windows系統中的隱藏文件，也是系統休眠文件。通常儲存在C盤根目錄下，其大小與系統安裝記憶體大小相當。這個檔案在電腦休眠時被使用，其中包含了當前系統的記憶體數據，以便在恢復時快速恢復到先前的狀態。由於其大小與記憶體容量相等，因此它可能會佔用較大的硬碟空間。 hiber
