时间:2021-05-28
本文实例讲述了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>更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
用vue做的购物车结算的功能,供大家参考,具体内容如下代码:商品信息商品金额商品数量总金额编辑{{item.productName}}{{item.produc
本文实例为大家分享了java实现购物车功能的具体代码,供大家参考,具体内容如下1需要实现1、实现淘淘商城的购物车功能2购物车功能2.1功能说明1、商品加入购物车
最近公司项目做商城模块,需要实现购物车功能,主要实现了单选、全选,金额合计,商品删除,商品数量加减等功能,先看看效果图:在这里插入图片描述一、实现步骤:0、添加
本文实例讲述了jQuery实现购物车计算价格功能的方法。分享给大家供大家参考。具体如下:目的实现在html界面修改购物车的件数,购物车商品价格的小计和总计要修改
本文实例讲述了Vue.js实现的购物车功能。分享给大家供大家参考,具体如下:使用计算属性,内置指令,方法等基础知识开发购物车。需求分析:展示一个已经加入购物车的