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