```HTML:run<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <link rel="stylesheet" href="https://cdn.bootCSS.com/bootstrap/4.1.1/CSS/bootstrap.CSS"> <script type="text/JavaScript" src="https://cdn.bootCSS.com/angular.Js/1.5.8/angular.Js"></script></head><body ng-app="myApp" ng-controller="myCtrl" ng-cloak ><div> <label>全选</label> <input type="checkBox" ng-model="allCheck" ng-click="allChecked()"> <span>总金额：{{ totalMoney() | currency:"￥"}}</span></div><table ng-repeat="oneshop in allShops track by $index" ng-init="outerIndex = $index" > <thead> <tr> <th><input type="checkBox" ng-model="oneshop.checked" ng-click="shopChecked(oneshop,allShops)"></th> <th colspan="7">{{oneshop.shopname}}</th> </tr> </thead> <tbody> <tr ng-repeat="oneGoods in oneshop.shopGoods track by $index" ng-init="innerIndex = $index"> <td><input type="checkBox" ng-model="oneGoods.checked" ng-click="singleGoods(oneGoods,oneshop.shopGoods,oneshop,allShops)"></td> <td>{{oneGoods.goodsname}}</td> <td>{{oneGoods.price}}元/件，共</td> <td><span ng-click="add(oneGoods,allShops)" >+</span></td> <td>{{oneGoods.number=oneGoods.number||1}}</td> <td><span ng-click="reduce(oneGoods,allShops)" >-</span></td> <td>件,本商品共: {{oneGoods.singleMoney}}元</td> <td ng-click="delete(innerIndex,outerIndex,allShops)" >删除</td> </tr> </tbody></table></body></HTML><script> var myApp = angular.module("myApp",[]); myApp.controller("myCtrl",function ($scope) { $scope.allShops = [ { "shopname": "专卖店一：北京鸡","shopGoods": [ { "goodsname": "北京鸡1","picture": "images/allShops_01.jpg","price": 150.00,"singleMoney":150.00 },{ "goodsname": "北京鸡2","picture": "images/allShops_02.jpg","price": 119.00,"singleMoney":119.00 },{ "goodsname": "北京鸡3","picture": "images/allShops_03.jpg","price": 101.00,"singleMoney":101.00 } ] },{ "shopname": "专卖店二：北京鸭","shopGoods": [ { "goodsname": "北京鸭1","picture": "images/allShops_04.jpg","price": 89.00,"singleMoney":89.00 },{ "goodsname": "北京鸭2","picture": "images/allShops_05.jpg","price": 99.00,"singleMoney":99.00 } ] },{ "shopname": "专卖店三：北京鹅","shopGoods": [ { "goodsname": "北京鹅1","picture": "images/allShops_06.jpg","price": 289.00,"singleMoney":289.00 } ] } ]; //点击加减按钮，数量加减;点击删除按钮，删除商品 $scope.reduce = function (goods,allGoodsOfOneshop,allShops) { goods.number--; if (goods.number <= 1) goods.number = 1; goods.singleMoney=goods.price*goods.number; goods.checked=true; $scope.singleGoods(goods,allShops); }; $scope.add = function (goods,allShops) { goods.number++; goods.singleMoney=goods.price*goods.number; goods.checked=true; $scope.singleGoods(goods,allShops); }; //删除该件商品 $scope.delete=function(innerIndex,allShops){ console.log(innerIndex); console.log(outerIndex); console.log(oneshop); console.log(allShops); oneshop.shopGoods.splice(innerIndex,1); if(oneshop.shopGoods.length<=0){ allShops.splice(outerIndex,1); } }; /*所有商品总金额计算*/ $scope.totalMoney = function () { var total = 0; angular.forEach($scope.allShops,function (outerItem) { angular.forEach(outerItem.shopGoods,function (innerItem) { if (innerItem.checked) { total += innerItem.price * innerItem.number; } }); }); return total; }; /*单件商品选择*/ $scope.singleGoods = function (oneGoods,allShops) { var flag = true; if (oneGoods.checked) { angular.forEach(allGoodsOfOneshop,function (innerItem) { if (innerItem.checked == false||typeof (innerItem.checked)=="undefined") { flag = false; } }); } else { $scope.allCheck=false; oneshop.checked = false; flag = false; } if (flag) { oneshop.checked = true; angular.forEach(allShops,function (outerItem) { if(outerItem.checked == false||typeof (outerItem.checked)=="undefined"){ flag=false; } }); } if (flag) { $scope.allCheck = true; } }; /*单家商铺选择*/ $scope.shopChecked = function (oneshop,allShops) { if (oneshop.checked) { var flag=true; angular.forEach(oneshop.shopGoods,function (innerItem) { innerItem.checked = true; }); angular.forEach(allShops,function (outerItem) { console.log(outerItem.checked); if(outerItem.checked == false||typeof (outerItem.checked)=="undefined"){ flag=false; } }); if(flag){ $scope.allCheck = true; } } else { $scope.allCheck=false; angular.forEach(oneshop.shopGoods,function (innerItem) { innerItem.checked = false; }); } }; /*全部商铺商品选择*/ $scope.allChecked = function () { if ($scope.allCheck) { angular.forEach($scope.allShops,function (oneshop) { oneshop.checked = true; angular.forEach(oneshop.shopGoods,function (innerItem) { innerItem.checked = true; }) }); } else { angular.forEach($scope.allShops,function (oneshop) { oneshop.checked = false; angular.forEach(oneshop.shopGoods,function (innerItem) { innerItem.checked = false; }) }); } }; })</script>``` 总结 以上是内存溢出为你收集整理的34ngular1实现京东购物车全部内容，希望文章能够帮你解决34ngular1实现京东购物车所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）