ng-bind购物车

最新推荐文章于 2020-09-12 11:01:57 发布

cdb_680

最新推荐文章于 2020-09-12 11:01:57 发布

阅读量182

点赞数

本文链接：https://blog.csdn.net/cdb_680/article/details/78592552

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../lib/css/ionic.css" />
<script src="../lib/js/ionic.bundle.js"></script>
<script>
angular.module("myapp", ["ionic"])
.controller("democ", function($scope) {
//1 定义数组
$scope.goods = [{
"id": 0,
"img": "img/head.jpg",
"title": "标题1",
"price": 100,
"num": 1,
"state": false
},
{
"id": 1,
"img": "img/head.jpg",
"title": "标题2",
"price": 110,
"num": 3,
"state": true
},
{
"id": 2,
"img": "img/head.jpg",
"title": "标题3",
"price": 120,
"num": 1,
"state": false
}
];
//计算总数量的函数, 提供返回值
$scope.count=function(){
var i=0; //购物车数量总计
for(g in $scope.goods){ //遍历数组
if($scope.goods[g].state){ //每个商品状态选择状态
i=i+$scope.goods[g].num;
}

}
return i;
}
//计算总价方法,提供返回值
$scope.sumPrice = function() {
var sum = 0; //总价
for(g in $scope.goods){
if($scope.goods[g].state) {
sum = sum + ($scope.goods[g].price * $scope.goods[g].num);
}
}
return sum;
}
// + 按钮添加商品的数量
$scope.more = function(good) {
good.num = good.num + 1;
}

//- 减少商品数量
$scope.less = function(good) {
if(good.num <= 1) {
//直接把商品从数组中移除
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].id == good.id) {
$scope.goods.splice(i, 1); //从购物车中把商品移除
}
}
} else {
good.num = good.num - 1;
}
}

//直接删除该商品
$scope.del = function(good) {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].id == good.id) {
$scope.goods.splice(i, 1); //从购物车中把商品移除
}
}
}

//全部选中/全取消选中
$scope.ckAll = function() {
var b = $scope.isck; //b:true 勾选 b:false:取消勾选
for(var i = 0; i < $scope.goods.length; i++) {
$scope.goods[i].state = b; //改变的选择状态
}
}

});
</script>
</head>

<body ng-app="myapp" ng-controller="democ">
<div class="content">
<ul class="list">
<li class="item" ng-repeat="good in goods ">
<input type="checkbox" ng-model="good.state" />
<img src={{good.img}} />
<h3>{{good.title}}</h3>
<span>{{good.price}}</span>
<button ng-click="less(good)">- </button> {{good.num}} <button ng-click="more(good)">+</button>
<button ng-click="del(good)">删除 </button>
</div>
</li>
</ul>
</div>
<div>
<input type="checkbox" ng-model="isck" ng-click="ckAll()" />全选合计<span ng-bind="sumPrice()"></span> 总计<span ng-bind="count()"></span>
<button class="button-dark">结算</button>
</div>
</body>

</html>

cdb_680

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ng-bind购物车

angular.module("myapp", ["ionic"]).controller("democ", function($scope) {//1 定义数组$scope.goods = [{"id": 0,"img": "img/head.jpg","title": "标题1","price": 100,"num": 1,"state": false
复制链接

扫一扫