Angular實現(xiàn)可刪除并計算總金額的購物車功能示例
更新時間：2017年12月26日 08:55:55 作者：當(dāng)愛0201
這篇文章主要介紹了Angular實現(xiàn)可刪除并計算總金額的購物車功能,涉及AngularJS事件響應(yīng)、元素遍歷與數(shù)值運算等相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了Angular實現(xiàn)可刪除并計算總金額的購物車功能。分享給大家供大家參考，具體如下：
先看運行效果：
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.dbjr.com.cn 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>數(shù)量</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>
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
您可能感興趣的文章:
- Angularjs 雙向綁定時字符串的轉(zhuǎn)換成數(shù)字類型的問題
- Angularjs中的驗證input輸入框只能輸入數(shù)字和小數(shù)點的寫法（推薦）
- angularjs實現(xiàn)猜數(shù)字大小功能
- AngularJS實現(xiàn)的生成隨機(jī)數(shù)與猜數(shù)字大小功能示例
- Angular限制input框輸入金額（是小數(shù)的話只保留兩位小數(shù)點）
- angularjs實現(xiàn)的購物金額計算工具示例
- AngularJS實現(xiàn)的根據(jù)數(shù)量與單價計算總價功能示例
- Angular實現(xiàn)購物車計算示例代碼
- angular 實現(xiàn)的輸入框數(shù)字千分位及保留幾位小數(shù)點功能示例
相關(guān)文章
橫向商品欄,把原有的滾動條改成自定義的樣式,并且給兩邊加上箭頭可以調(diào)整,可以拖動商品和滾輪實現(xiàn)滾動條效果,這篇文章主要介紹了angularjs 指令實現(xiàn)自定義滾動條效果,需要的朋友可以參考下2024-03-03
基于datepicker定義自己的angular時間組件的示例
這篇文章主要介紹了基于datepicker定義自己的angular時間組件,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
AngularJS使用ui-route實現(xiàn)多層嵌套路由的示例
這篇文章主要介紹了AngularJS使用ui-route實現(xiàn)多層嵌套路由的示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件詳解
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-07-07
下面小編就為大家?guī)硪黄猘ngularjs中的$eval方法詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
組件是一種特殊的指令，使用更簡單的配置項來構(gòu)建基于組件的應(yīng)用程序架構(gòu).這篇文章主要介紹了Angular組件——父組件調(diào)用子組件方法,需要的朋友可以參考下2018-04-04
這篇文章主要給大家介紹了關(guān)于angular瀏覽器兼容性問題的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用angular具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
angular學(xué)習(xí)之從零搭建一個angular4.0項目
本篇文章主要介紹了從零搭建一個angular4.0項目，主要用到的工具angular4.0、angular-cli、npm(v3.10.8)、node(v6.2.0)，有興趣的可以了解一下2017-07-07
我們知道在應(yīng)用的頁面或者組件需要加載數(shù)據(jù)時，瀏覽器和angular渲染頁面都需要消耗一定的時間。這篇文章主要介紹了AngularJS 防止頁面閃爍的方法,需要的朋友可以參考下2017-03-03
詳解AngularJS跨頁面?zhèn)髦担╱i-router）
本篇文章主要介紹了詳解AngularJS跨頁面?zhèn)髦担╱i-router），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08