本文主要和大家分享angularJS实现简易购物车的方法，希望能帮助到大家。
nbsp;html>我的购物车 * { margin: 0; padding: 0; } table { border-collapse: collapse; } td, th { padding: 3px; height: 50px; width: 100px; border: 1px solid gainsboro; text-align: left; } .nav { width: 800px; text-align: right; } tbody tr td:nth-child(4) { width: 200px; } tbody tr td:nth-child(4) button { width: 30px; height: 30px; } tbody tr td:nth-child(4) input { width: 30px; height: 30px; border: 1px solid gainsboro; border-radius: 5px; } .nav button { width: 150px; height: 40px; background: red; color: white; border: 0; border-radius: 5px; } button { width: 50px; height: 30px; background: blue; border: 0; border-radius: 5px; color: white; } a { text-decoration: none; } var myapp = angular.module("myapp", []); myapp.controller("myCtrl", function ($scope) { //自拟商品信息 $scope.data = [{"name": "qq", "price": 12.9, "number": 1, done: false}, {"name": "wx", "price": 23.9, "number": 1, done: false}, {"name": "wx", "price": 99.9, "number": 1, done: false}, {"name": "wb", "price": 63.9, "number": 1, done: false}]; //点击加号的方法 $scope.add = function (index) { $scope.data[index].number++; $scope.sum(); } //点击减号的方法 $scope.jian = function (index) { //点击-操作时,当商品数量为1时，弹出对话框，询问是否移除 if ($scope.data[index].number == 1) { if (confirm("您是否将该商品移除购物车？")) { $scope.data[index].number--; $scope.data.splice(index,1); $scope.sum(); } } else if ($scope.data[index].number > 1) { $scope.data[index].number--; $scope.sum(); } } //计算商品总价的方法 $scope.sum = function () { $scope.allMoney = 0; for (var i = 0; i < $scope.data.length; i++) { $scope.allMoney += $scope.data[i].price * $scope.data[i].number; } } $scope.sum(); //点击输入框的方法 $scope.dianji = function () { $scope.sum(); } $scope.shopping = false; //默认全选是不选的 $scope.check = false; //删除全部商品的方法 $scope.delAll = function (check) { $scope.checkD(check); } $scope.checkD = function (state) { for (var i = 0; i < $scope.data.length; i++) { $scope.data[i].done = state; } } //下面的选框代表 $scope.checkSS = false; $scope.checkS = function () { $scope.flag = 0; for (var i = 0; i < $scope.data.length; i++) { if ($scope.data[i].done == true) { $scope.flag++; $scope.checkSS = true; } } //实现当下面全部选中，全选框选中的效果 if ($scope.flag == $scope.data.length) { $scope.check = true; } else { $scope.check = false; } } //判断全选框下面的多选框有几个的方法 //清空购物车的方法 $scope.clearShpooing = function () { if ($scope.check == true || $scope.checkSS == true) { for (var i = 0; i < $scope.data.length; i++) { if ($scope.data[i].done == true) { $scope.data.splice(i--, 1); if ($scope.data.length == 0) { $scope.show = false; $scope.shopping = true; } $scope.sum(); } } if ($scope.check == true) { $scope.data.length = 0; $scope.show = false; $scope.shopping = true; } } else { alert("请先选择要操作的商品"); } } $scope.show = true; $scope.remove = function (index) { $scope.data.splice(index, 1); if ($scope.data.length == 0) { $scope.show = false; $scope.shopping = true; } } //点击去逛商城的代码 $scope.showS=function () { $scope.show = true; $scope.check=false; } });我的购物车
您的购物车为空去逛商城
登录后复制
name
price
number
totalprice
option
{{item.name}} {{item.price | currency:”￥”}} {{item.price*item.number |currency:”￥”}}
总价为:{{allMoney | currency:”￥”}}相关推荐：
JavaScript编写一个简易购物车功能
以上就是angularJS实现简易购物车的方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2776687.html
