angularJs实现购物车增删模糊查询

导入架包：angular.min.js

jquery-3.2.1.min.js

<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<title></title>
<style>
span{
border: 1px solid black;
background-color: #00FF66;
}
.css1{
background-color: palegoldenrod;
}
.css2{
background-color: palegreen;
}
</style>


<script type="text/javascript" src="js/angular.min.js" ></script>
<script>

//2.定义模板

var app = angular.module("App",[]);

//3.定义控制器

app.controller("mykzq",function($scope){
//4.数据
$scope.datas=[
{"gid":001,"gname":"手机", "gnum":3,"gprice":1000,"gcount":3000,"boole":false},
{"gid":002, "gname":"电脑","gnum":3,"gprice":2000,"gcount":6000,"boole":false},
{"gid":003, "gname":"电视","gnum":6,"gprice":500,"gcount":3000,"boole":false}];

//5.实现删除的功能
$scope.remove=function($index){
//根据下标$index 使用splice()方法进行单一删除
$scope.datas.splice($index,1);
}

//6.实现计算总数的功能
$scope.gnums = function(){
var a = 0;
//循环数组
for(var i=0;i<$scope.datas.length;i++){
//总价+=每个数量
a+=$scope.datas[i].gnum;
}
//最后返回总数
return a;
}

//7.实现计算总价的功能
$scope.gprices = function(){
//定义总价初始值为0
var b = 0;
//循环数组
for(var x=0;x<$scope.datas.length;x++){
//总价+=每个数量
b+=$scope.datas[x].gnum*$scope.datas[x].gprice;
}
//最后返回总价
return b;
}

//8.实现清空购物车的功能
$scope.removeAll = function(){
//设置数组为空
$scope.datas=[];
}

//9.实现当商品数量减少到小于1
$scope.chan=function($index){
//循环数组
if($scope.datas[$index].gnum<=0){
//弹出提示框
var f = confirm("确定要删除该产品吗？");
//点击提示框确定，进行删除该商品
if(f){
$scope.datas.splice($index,1);
}
}
}

//10.判断复选框的状态
$scope.boxChen = function($index){
if($scope.datas[$index].boole){
$scope.datas[$index].boole=false;
}else{
$scope.datas[$index].boole=true;
}
}

//11.选中删除的功能
$scope.deletegoods = function(){

var flay=false;

for (var x = 0;x<$scope.datas.length;x++) {
//判断数组中复选框的状态值
if($scope.datas[x].boole){
//若为true(选中)则删除
flay = true;
}
}
if(!flay){
alert("请选择");
}else{

if(confirm("确定要删除吗？")){
//循环数组
for (var x = 0;x<$scope.datas.length;x++) {
//判断数组中复选框的状态值
if($scope.datas[x].boole){
//若为true(选中)则删除
$scope.datas.splice(x,1);
x--;
flay = true;
}
}
}
}

}

});
</script>
</head>
<body ng-controller="mykzq">
<center>
<h1 style="background-color: #D7FF86; width: 250px;">我的购物车详情</h1>


<input type="text" placeholder="根据商品名称查询" ng-model="select" style="margin-left: 600px; border-radius: 20px;margin-bottom: 10px;
background-color: yellow;"/>


<table style="width: 800px; background-color: #999999;" border="1" cellspacing="0">
<tr>


<th>商品编号<input type="button" value="∧" ng-click="orderkey='gid'"/></th>
<th>商品名称</th>
<th>商品数量</th>
<th>商品单价</th>


<th>价格小计<input type="button" value="∨" ng-click="orderkey='-gnum*gprice'"/></th>
<th colspan="2">操作</th>
</tr>


<tr ng-repeat="x in datas | orderBy:orderkey | filter:{gname:select}" class="{{$even?'css1':'css2'}}">
<td>{{x.gid}}</td>
<td>{{x.gname}}</td>


<td><input type="number" ng-model="x.gnum" ng-change="chan($index)"/></td>
<td>{{x.gprice}}</td>
<td>{{x.gnum*x.gprice}}</td>


<td><button ng-click="remove($index)" style="background-color: yellow;border-radius: 10px;">删除</button></td>
<td><input type="checkbox" ng-click="boxChen($index)"/></td>
</tr>
</table>

<div style="margin-top: 20px;">
<span>商品总数:{{gnums()}}</span>
<span style="margin-left: 145px;">商品总价：{{gprices()}}</span>


<input type="button" value="清空购物车" ng-click="removeAll()" style="background-color: yellow; border-radius: 20px;margin-left: 145px;"/>

<input type="button" value="删除" ng-click="deletegoods()" style="background-color: yellow; border-radius: 20px;margin-left: 145px;"/>

</div>
</center>

</body>
</html>

angularJs实现购物车 增删 模糊查询

猜你喜欢

angularJs实现购物车增删模糊查询