```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" style="margin:20px;" ng-cloak >
<div>
<label>全选</label>
<input type="checkbox" ng-model="allCheck" ng-click="allChecked()">
<span>总金额：{{ totalMoney() | currency:"￥"}}</span>
</div>
<table class="table table-bordered" ng-repeat="oneShop in allShops track by $index" ng-init="outerIndex = $index" style="margin:30px auto">
<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,oneShop.shopGoods,oneShop,allShops)" style="display: inline-block;width:25px;text-align: center; border:1px solid gray;user-select: none;cursor: pointer;">+</span></td>
<td>{{oneGoods.number=oneGoods.number||1}}</td>
<td><span ng-click="reduce(oneGoods,oneShop.shopGoods,oneShop,allShops)" style="display: inline-block;width:25px;text-align: center; border:1px solid gray;user-select: none;cursor: pointer;">-</span></td>
<td>件,本商品共: {{oneGoods.singleMoney}}元</td>
<td ng-click="delete(innerIndex,outerIndex,oneShop,allShops)" style="user-select: none;cursor: pointer;">删除</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, oneShop ,allShops) {
goods.number--;
if (goods.number <= 1) goods.number = 1;
goods.singleMoney=goods.price*goods.number;
goods.checked=true;
$scope.singleGoods(goods, allGoodsOfOneShop, oneShop ,allShops);
};
$scope.add = function (goods, allGoodsOfOneShop, oneShop ,allShops) {
goods.number++;
goods.singleMoney=goods.price*goods.number;
goods.checked=true;
$scope.singleGoods(goods, allGoodsOfOneShop, oneShop ,allShops);
};
//删除该件商品
$scope.delete=function(innerIndex,outerIndex,oneShop,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, allGoodsOfOneShop, oneShop ,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实现京东购物车
猜你喜欢
转载自www.cnblogs.com/gushixianqiancheng/p/10966402.html
今日推荐
周排行