购物车类增删改查、隔行换色等功能

最新推荐文章于 2023-05-05 00:05:48 发布

四夕520

最新推荐文章于 2023-05-05 00:05:48 发布

阅读量359

点赞数

本文链接：https://blog.csdn.net/luokaiqin520/article/details/79428590

版权

<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="UTF-8">
<title></title>


<style>
.css1{
background-color: palegreen;
}
.css2{
background-color: pink;
}
</style>
</head>
<body ng-controller="mykzq">


<div>
<input type="text" placeholder="请输入查询的商品" ng-model="search"/>

按数量排序：
<select ng-model="numBy">
<option value="num">数量正序</option>
<option value="-num">数量倒序</option>
</select>

<button ng-click="deleteAll()">批量删除</button>

</div>


<table border="1" cellspacing="0" style="width: 800px;" >
<tr>
<td><input type="checkbox" ng-click="selectAll()"></td>
<td>产品编号</td>
<td>产品名称</td>
<td>购买数量</td>
<td>产品单价</td>
<td>产品总价</td>
<td colspan="2">操作</td>
</tr>


<tr ng-repeat="x in Product | filter:{name:search} | orderBy:numBy" class="{{$even ? 'css1':'css2'}}">
<td><input type="checkbox" ng-model="x.state"></td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>
<button ng-click="jian($index)">-</button>
<input type="number" ng-model="x.num" />
<button ng-click="add($index)">+</button>
</td>
<td>{{x.price}}</td>
<td>{{x.num*x.price}}</td>
<td>
<button ng-click="remove($index)">删除</button>
</td>
<td>
<button ng-click="update($index)">修改</button>
</td>
</tr>
</table>


<div style="margin-top: 10px;">
<span>总价：</span>
<span>{{totalPrices()}}</span>

<span>总数量：</span>
<span>{{numAll()}}</span>

<button ng-click="removeAll()">清空购物车</button>
</div>

<form style="border: 1px solid yellow; width: 260px;margin-top: 30px;">

商品编号:<input type="text" ng-model="ID"/><br />
商品名称:<input type="text" ng-model="IDname"/><br />
商品数量:<input type="number" ng-model="IDnum"/><br />
商品单价:<input type="text" ng-model="IDprice"/><br />

<button ng-click="add333()">添加</button>

</form>

<form style="border: solid black; width: 300px;" ng-show="updateShow">
商品编号:<input type="text" ng-model="updateId"/><br />
商品名称:<input type="text" ng-model="updateName"/><br />
商品数量:<input type="number" ng-model="updateNum"/><br />
商品编号:<input type="text" ng-model="updatePrice"/><br />
<button type="button" value="提交" ng-click="updateSub()">提交</button>

</form>


<script src="../libs/angular.min.js"></script>

<script>
//定义模板
var App = angular.module("App",[]);

//定义控制器
App.controller("mykzq",function($scope){

//给Product定义数据
$scope.Product = [{
id: 1000,
name: "iPhone8",
num: 1,
price: 8888,
state: false
}, {
id: 1001,
name: "iPhone9",
num: 1,
price: 9888,
state: false
}, {
id: 1002,
name: "iPhone 2s",
num: 1,
price: 3888,
state: false
}, {
id: 1003,
name: "iPhone 7P+",
num: 1,
price: 10088,
state: false
}];

//减数量的操作(传入参数)
$scope.jian = function(index){
if($scope.Product[index].num>=1){
$scope.Product[index].num--;
}else{
//删除
}
}

//加数量的操作
$scope.add = function(index){
$scope.Product[index].num++;
}

//删除的操作
$scope.remove = function(index){
if(confirm("确定删除吗？")){
$scope.Product.splice(index,1);
}
}

//算总价每件商品的单价*数量，再相加到一起
$scope.totalPrices = function(){
var totalPrices = 0;
for (var x=0; x<$scope.Product.length;x++) {
totalPrices+=$scope.Product[x].num*$scope.Product[x].price;
}
return totalPrices;
}

//算总数量每件商品的数量相加
$scope.numAll = function(){
var numAll = 0;
for (var x = 0; x<$scope.Product.length;x++) {
numAll+=$scope.Product[x].num;
}
return numAll;
}

//清空购物车直接将数据设置为空
$scope.removeAll = function(){
$scope.Product=[];
}

//批量删除
$scope.deleteAll = function(){
//默认空的数组
var arr = [];
//循环数组
for (var x = 0;x<$scope.Product.length;x++) {
//如果状态是true的情况下，代表checkbox已经选中了
if($scope.Product[x].state){
arr.push($scope.Product[x].name);
}
}
//如果说数给的长度为0，证明一个都没有选中
if(arr.length<=0){
confirm("请选择需要删除的商品");
}else{
//说明数给的长度不为0，直接删除 ng-repeat ="x in 数组"
for (index in arr) {
for (index1 in $scope.Product ) {
if(arr[index]==$scope.Product[index1].name)
$scope.Product.splice(index1,1);
}
}
}
}

//进行添加的操作
$scope.add333 = function(){
//首先判断一下商品编号不能为空，商品编号要是数字类型
if($scope.ID=="" || $scope.ID==null){
alert("商品编号不能为空");
return;
}
if(isNaN($scope.ID)){
alert("商品编号必须为数字");
return;
}

//进行赋值
$scope.Product.push({
id:$scope.ID,
name:$scope.IDname,
num:$scope.IDnum,
price:$scope.IDprice
});
}

//修改的操作默认表单隐藏
$scope.updateShow = false;
//定义空值
var updateId="";
var updateName ="";
var updateNum ="";
var updatePrice="";

$scope.update = function(index){
if(confirm("确定要修改吗？")){
//点击修改时，表单才显示
$scope.updateShow=true;
//回显数据任何进行赋值
$scope.updateId = $scope.Product[index].id;
$scope.updateName = $scope.Product[index].name;
$scope.updateNum = $scope.Product[index].num;
$scope.updatePrice = $scope.Product[index].price;
}
}

//修改提交的操作
$scope.updateSub = function(){
//进行id的判断，如果id相等的情况下，我就进行删除的操作
for (index in $scope.Product) {
//如果ID相等的情况下，进行数据的修改
if($scope.updateId==$scope.Product[index].id){
$scope.Product[index].name=$scope.updateName;
$scope.Product[index].num=$scope.updateNum;
$scope.Product[index].price=$scope.updatePrice;

//修改后，表单自动隐藏
$scope.updateShow=false;
}
}
}

});

</script>
</body>
</html>