购物车 结算功能,选中勾选状态可以显示所有选中的总价还有选中的数量,未选中不进行计算,删除功能
动态效果图如下:
代码如下:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js"></script>
<script>
angular.module("myapp", [])
.controller("mycon", ["$scope", function($scope) {
//创建数据源 定义一个数组
$scope.shuzu = [{
"id": 0,
"img": "img/head.jpg",
"title": "标题一",
"price": 150,
"num": 1,
//是否选中的状态
"state": false
}, {
"id": 1,
"img": "img/head.jpg",
"title": "标题二",
"price": 119,
"num": 2,
//是否选中的状态
"state": false
}, {
"id": 2,
"img": "img/head.jpg",
"title": "标题三",
"price": 120,
"num": 1,
//是否选中的状态
"state": false
}];
//当我点击 加减按钮时,实现++--功能
$scope.more = function(x) {
//当我点击+按钮时候,接受事件传过来的对象,找到其中的num,加一
x.num = x.num + 1;
}
$scope.less = function(x) {
if(x.num > 1) {
x.num = x.num - 1;
} else {
for(var i = 0; i < $scope.shuzu.length; i++) {
if($scope.shuzu[i].id == x.id) {
$scope.shuzu.splice(i, 1);
}
}
}
}
//点击删除按钮
$scope.del = function(a) {
for(var i = 0; i < $scope.shuzu.length; i++) {
if($scope.shuzu[i].id == a.id) {
$scope.shuzu.splice(i, 1);
}
}
}
//当我点击全选框时候
$scope.checkAll = function() {
//获取当前状态
var b = $scope.isck;
//循环否选或者取消勾选状态
for(var i = 0; i < $scope.shuzu.length; i++) {
$scope.shuzu[i].state = b;
}
}
//合计
$scope.sumPrice = function() {
//定义一个变量sum作为
var sum = 0;
//遍历数组 , 如果数组中有状态是true, 那么就把当前单价*当前数量+总数再赋值给总量,最后返回显示到合计这里
for(var i = 0; i < $scope.shuzu.length; i++) {
if($scope.shuzu[i].state) {
sum = sum + $scope.shuzu[i].price * $scope.shuzu[i].num;
}
}
return sum;
}
//总计
$scope.count = function() {
var q = 0; //购物车数量总计
for(var i = 0; i < $scope.shuzu.length; i++) {
if($scope.shuzu[i].state) {
q = q + $scope.shuzu[i].num;
}
}
return q;
}
}])
</script>
</head>
<body ng-controller="mycon">
<span style="margin-left: 20px;">购物车</span><br />
<div>
<ul style="list-style: none;">
<li ng-repeat="x in shuzu">
<input type="checkbox" ng-model="x.state" />
<img src="{{x.img}}"> {{x.title}} {{x.price |currency : "￥"}}
<button ng-click="less(x)">-</button>{{x.num}}<button ng-click="more(x)">+</button>
<button ng-click="del(x)">删除</button>
</li>
</ul>
<input type="checkbox" ng-model="isck" ng-click="checkAll()" />全选 合计:<span ng-bind="sumPrice()"></span>总计<span ng-bind="count()"></span>
</div>
</body>
</html>