test.html:
<!DOCTYPE html>
<html>
<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>
<script type="text/javascript" src="test.js"></script>
</head>
<!--ng-app 定义一个 AngularJS 应用程序。(指定哪部分需要用angular管理) ,
ng-controller定义控制器
ng-cloak 应用在加载时可能会由于AngularJS 代码未加载完而出现显示 AngularJS 代码，进而会有闪烁的效果， ng-cloak 指令是为了防止该问题的发生-->
<body ng-app="myApp" ng-controller="myCtrl" style="margin:20px;" ng-cloak >
<div>
<label>全选</label>
<!--ng-model 把 DOM 元素值绑定到变量。(一般用于标签input, select, textarea) <input type="text" ng-model="name">
ng-click 关联一个click事件-->
<input type="checkbox" ng-model="allCheck" ng-click="allChecked()">
<!--|过滤器 currency:货币处理 {{num | currency : '￥'}} 默认美元-->
<span>总金额：{{ totalMoney() | currency:"￥"}}</span>
</div>
<!--ng-repeat 对集合中的每项会克隆一次 HTML 元素 ng-repeat="oneShop in allShops track by $index"-->
<!--ng-init 定义初始值 <div ng-app="myApp" ng-init="name='John'">-->
<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>
test.js:
//注册一个angular模块 参数--myApp：模块名称，--[]依赖的参数
var myApp = angular.module("myApp", []);
//定义控制器
myApp.controller("myCtrl", function ($scope) {
/*初始化*/
$scope.allShops = [
{
"shopName": "table1：line",
"shopGoods": [
{
"goodsName": "line1",
"picture": "images/allShops_01.jpg",
"price": 150.00,
"singleMoney": 150.00
},
{
"goodsName": "line2",
"picture": "images/allShops_02.jpg",
"price": 119.00,
"singleMoney": 119.00
},
{
"goodsName": "line3",
"picture": "images/allShops_03.jpg",
"price": 101.00,
"singleMoney": 101.00
}
]
},
{
"shopName": "table2：line",
"shopGoods": [
{
"goodsName": "line1",
"picture": "images/allShops_04.jpg",
"price": 89.00,
"singleMoney": 89.00
},
{
"goodsName": "line2",
"picture": "images/allShops_05.jpg",
"price": 99.00,
"singleMoney": 99.00
}
]
},
{
"shopName": "table3：line",
"shopGoods": [
{
"goodsName": "line1",
"picture": "images/allShops_06.jpg",
"price": 289.00,
"singleMoney": 289.00
}
]
}
];
/*全选*/
$scope.allChecked = () => {
if ($scope.allCheck) {
$scope.allShops.forEach(oneShop => {
oneShop.checked = true;
oneShop.shopGoods.forEach(innerItem => {
innerItem.checked = true;
})
})
} else {
$scope.allShops.forEach(oneShop => {
oneShop.checked = false;
oneShop.shopGoods.forEach(innerItem => {
innerItem.checked = false;
})
})
}
};
/*所有商品总金额计算*/
$scope.totalMoney = () => {
let total = 0;
$scope.allShops.forEach(oneShop => {
oneShop.shopGoods.forEach(innerItem => {
if (innerItem.checked) {
total += innerItem.price * innerItem.number
}
})
})
return total;
};
/*单家商铺选择*/
$scope.shopChecked = (oneShop, allShops) => {
if (oneShop.checked) {
let flag = true;
oneShop.shopGoods.forEach(innerItem => {
innerItem.checked = true;
})
allShops.forEach(shopItem => {
if (!shopItem || shopItem.checked === false) {
flag = false;
}
})
if (flag) {
$scope.allCheck = true;
}
} else {
oneShop.shopGoods.forEach(innerItem => {
innerItem.checked = false;
})
$scope.allCheck = false;
}
};
/*单件商品选择*/
$scope.singleGoods = (oneGoods, allGoodsOfOneShop, oneShop, allShops) => {
let flag = true;
if (oneGoods.checked) {
allGoodsOfOneShop.forEach(innerItem => {
if (!innerItem.checked || innerItem.checked === false) {
flag = false;
}
})
} else {
$scope.allCheck = false;
oneShop.checked = false;
flag = false;
}
if (flag) {
oneShop.checked = true;
allShops.forEach(shopItem => {
if (!shopItem.checked || shopItem.checked === false) {
flag = false;
}
})
}
if (flag) {
$scope.allCheck = true;
}
};
/*单件商品删除*/
$scope.delete = (innerIndex, outerIndex, oneShop, allShops) => {
//删除数组中第innerIndex项（从0开始计数）,一共删除一个元素
oneShop.shopGoods.splice(innerIndex, 1);
if (oneShop.shopGoods.length <= 0) {
allShops.splice(outerIndex, 1);
}
};
//点击加减按钮，数量加减;点击删除按钮，删除商品
$scope.add = (oneGoods, allGoodsOfOneShop, oneShop, allShops) => {
oneGoods.number++;
oneGoods.singleMoney = oneGoods.price * oneGoods.number;
oneGoods.checked = true;
$scope.singleGoods(oneGoods, allGoodsOfOneShop, oneShop, allShops);
}
$scope.reduce = (oneGoods, allGoodsOfOneShop, oneShop, allShops) => {
oneGoods.number--;
if (oneGoods.number <= 1) {
oneGoods.number = 1;
}
oneGoods.singleMoney = oneGoods.price * oneGoods.number;
oneGoods.checked = true;
$scope.singleGoods(oneGoods, allGoodsOfOneShop, oneShop, allShops);
}
})
网友评论