<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#but{
width:30px;
}
#btn{
margin-left: 300px;
}
#ton{
margin-left: 5px;
}
</style>
<script src="angular.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function ($scope) {
$scope.users = [
{name: "qq", price: 12.00, number: 2, totaprice: 25.80, state: false},
{name: "wx", price: 23.90, number: 1, totaprice: 23.90, state: false},
{name: "wx", price: 99.90, number: 1, totaprice: 99.90, state: false}
];
//改变购买数量
$scope.change=function(index){
if($scope.users[index].number>=1){
}else{
$scope.users[index].number=1;
}
};
//减少
$scope.reduce= function (index) {
if($scope.users[index].number>1){
$scope.users[index].number--;
}else{
$scope.remove(index);
}
};
//增加
$scope.add=function(index){
$scope.users[index].number++;
};
//购买总数量函数
$scope.numAll = function(){
var numAlls = 0
for(var i = 0 ; i <$scope.users.length;i++ ){
numAlls += $scope.users[i].number;
}
return numAlls;
}
/*计算总价格*/
$scope.allsum=function () {
var allPrice=0;
for(var i=0;i<$scope.users.length;i++){
allPrice+=$scope.users[i].price*$scope.users[i].number;
}
return allPrice;
};
//全选方法
$scope.selectAll = false;
$scope.selectAllFun = function () {
if ($scope.selectAll) {
for (index in $scope.users) {
$scope.users[index].state = true;
}
} else {
for (index in $scope.users) {
$scope.users[index].state = false;
}
}
}
//检测是否全选
$scope.checkSelect = function (index) {
var temp = 0;
if ($scope.users[index].state == true) {
temp++;
} else {
temp--;
}
if (temp == $scope.users.length) {
$scope.selectAll = true;
} else {
$scope.selectAll = false;
}
var haha = false;
for (i in $scope.users) {
if ($scope.users[i].state == true) {
} else {
haha = true;
}
}
if (haha) {
$scope.selectAll = false;
} else {
$scope.selectAll = true;
}
}
//批量删除
$scope.deleteSel = function () {
var userNames = [];
for (index in $scope.users) {
if ($scope.users[index].state == true) {
userNames.push($scope.users[index].name);
}
}
if (userNames.length > 0) {
if (confirm("是否删除选中项?")) {
for (i in userNames) {
var name = userNames[i];
for (i2 in $scope.users) {
if ($scope.users[i2].name == name) {
$scope.users.splice(i2, 1);
}
}
}
}
} else {
alert("请选择删除的项")
}
}
//删除单个购物车内容
$scope.remove = function (index) {
if (confirm("确定要删除此项嘛?")) {
$scope.users.splice(index, 1);
}
};
/*清空购物车*/
$scope.alldel=function () {
if($scope.users.length==0){
alert("您的购物车已空");
}else{
if (confirm("确定清空购物车?"))
$scope.users=[];
}
}
//判断数据源的长度
$scope.getSize = function(){
if($scope.users.length > 0 ){
return false;
}else{
return true;
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>我的购物车</h3>
<div id="btn">
<input ng-click="deleteSel()" type="button" value="批量删除" style="background: #D9534F"/>
<input ng-click="alldel()" type="button" value="清空购物车" style="background: #D9534F" id="ton"/>
</div>
<div >
<table border="1" cellspacing="1" cellpadding="10" ng-hide="getSize()">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th>
<th>name</th>
<th>price</th>
<th>number</th>
<th>totaIPrice</th>
<th>option</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td><input type="checkbox" ng-click="checkSelect($index)" ng-model="user.state"/></td>
<td>{{user.name}}</td>
<td>{{user.price|currency:"¥:"}}</td>
<td><button ng-click="reduce($index)" style="background: #337AB7">-</button>
<input type="number" id="but" placeholder="请输入大于0的数" ng-model="user.number" ng-change="change($index)">
<button ng-click="add($index)" style="background: #337AB7">+</button> </td>
<td>{{user.price*user.number|currency:"¥:"}}</td>
<td><button ng-click="remove($index)" class="btn" style="background: #337AB7">删除</button> </td>
</tr>
<tr>
<td colspan="6">
总数量:<span ng-bind="numAll()"></span><br>
总价为:<span ng-bind="allsum()|currency:'¥:'"></span>
</td>
</tr>
</tbody>
</table><br><br><br><br><br><br>
<span ng-show="getSize()">您的购物车为空,请先逛<a href="https://www.taobao.com/">购物车</a></span>
</div>
</center>
</body>
</html>
仿淘宝购物车
最新推荐文章于 2023-05-24 10:23:53 发布