购物车 结算功能,选中勾选状态可以显示所有选中的总价还有选中的数量,未选中不进行计算,删除功能
来源:互联网 发布:软件开发费 税率2017 编辑:程序博客网 时间:2024/05/22 15:10
动态效果图如下:
代码如下:
<!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>
- 购物车 结算功能,选中勾选状态可以显示所有选中的总价还有选中的数量,未选中不进行计算,删除功能
- 购物车中计算checkBox选中总价功能的实现
- CompoundButton 选中/未选中状态的按钮
- UIButton的选中功能
- 实现购物车结算功能:批量/全部删除,全选,单价/总价,数量增减,页面隐藏/显示
- js文字的选中功能
- checkbox未选中状态不传递value的解决办法
- checkbox未选中状态不传递value的解决办法
- 让checkbox不选中即将选中的checkbox不选中
- UITableView 选中一行后,不显示选中颜色的方法
- tableView取消选中行的选中状态
- GridPanel去掉选中行的选中状态
- Android ImageButton 选中与不选中 不同状态之间显示不同图片的方式
- UItableView的选中状态
- UITableView 的选中状态
- js 取消页面可以选中文字的功能
- CListBox取消高亮选中状态的功能:
- 实现购物车结算功能:批量和全部删除,全选和反选,单价和总价,数量增减,页面隐藏和显示
- 联想拯救者R720安装Win7系统
- json操作
- vim 常用快捷键及使用技巧
- 《算法》——第二章:排序
- c语言3种链接属性: 外部(external), 内部(internal),无设置(none)
- 购物车 结算功能,选中勾选状态可以显示所有选中的总价还有选中的数量,未选中不进行计算,删除功能
- 隐马尔科夫模型(HMM)
- Ajax
- CEC加州能效认证
- Java+Selenium启动各种浏览器及其下载驱动和设置
- 【深度学习】入门理解ResNet和他的小姨子们(五)---ResNet增强版
- cuda 8
- 如何用数据可视化之美逼死密集恐惧症
- 文章标题