<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="js/angularjs1.4.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<script type="text/javascript">
document.addEventListener('plusready', function() {
//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
});
</script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.title {
display: flex;
height: 40px;
background: blue;
color: white;
justify-content: center;
align-items: center;
font-size: 25px;
}
.by {
margin: 5px;
height: 30px;
width: 95%;
}
img {
height: 60px;
width: 60px;
}
table {
width: 100%;
}
td {
border-bottom: 1px solid black;
}
/*
各行变色
tr
* */
tr:nth-child(even) {
background: gainsboro;
}
.bottom{
width: 100%;
}
.nav {
width: 100%;
height: 40px;
background: red;
font-size: 35px;
display: flex;
justify-content: center;
align-items: center;
font-family: "楷体";
color: white;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<!--
标题
-->
<div class="main">
<div class="nav">
购物车
</div>
</div>
<input type="text" placeholder="名称价格查询" class="by" ng-model="by" />
<div class="content">
<input type="checkbox" ng-click="xuan()" style="height: 20px;width: 20px;" />全选/反选
<input type="button" value="添加商品" ng-click="add()" />
<input type="button" value="批量删除" ng-click="deleAll()" />
</div>
<!--
清空提示
ng-show
true == 0
-->
<div ng-hide="fruits.length">
购物车为空
</div>
<table border="0px" cellspacing="0" cellpadding="0">
<tr ng-repeat="f in fruits|filter:by">
<td><input type="checkbox" class="cb" ng-model="f.ck" style="height: 20px;width: 20px;" /></td>
<td><img src="{{f.picurl}}" /></td>
<td>
<div>
{{f.fname}}
</div>
<div style="color: red;">
价格：{{f.fprice|currency:"￥:"}}
</div>
<div>
<input type="button" value="-" style="height: 30px;width: 30px;" ng-click="jian(f.fname,f.fsum)" />
<input type="text" value="{{f.fsum}}" />
<input type="button" value="+" style="height: 30px;width: 30px;" ng-click="jia(f.fname,f.fsum)" />
</div>
<div>
小计:{{f.fsum*f.fprice|currency:"￥:"}}
<input type="button" value="删除" ng-click="dele(f.fname)" />
</div>
</td>
</tr>
</table>
<!--
下面
-->
<div class="bottom">
<span id="" style="color: red;">
总计：{{sum()|currency:"￥:"}}
</span>
<input type="button" name="" id="" value="清空购物车" ng-click="clear()" />
<input type="button" name="" id="" value="去结算{{count()}}" style="background: green;" />
</div>
<!--
添加页面
-->
<div ng-show="b_show">
<center>
商品名称:<input type="text" placeholder="商品名" ng-model="name12" /><br>
<span style="color: red;" ng-show="name_show">
*名字不能为空
</span>
<br> 商品数量:
<input type="text" placeholder="商品数量" ng-model="sum12" /><br>
<span style="color: red;" ng-show="sum_show">
*数量大于0
</span>
<br> 商品价格:
<input type="text" placeholder="商品价格" ng-model="price12" /><br>
<span style="color: red;" ng-show="price_show">
*价格不能为空
</span>
<br>
<input type="button" id="" value="保存" ng-click="save()" />
</center>
</div>
<script type="text/javascript">
var mo = angular.module("myApp", []);
mo.controller("myCtrl", function($scope, $http) {
//请求网络数据
$http.get("fruits.json").then(function(res) {
$scope.fruits = res.data;
});
//选择
$scope.xuan = function() {
for(var i = 0; i < $scope.fruits.length; i++) {
var f = $scope.fruits[i];
f.ck = !f.ck;
}
}
//刪除
$scope.dele = function(name) {
var b = confirm("是否要删除？");
if(b) {
for(var i = 0; i < $scope.fruits.length; i++) {
var f = $scope.fruits[i];
//判斷名字
if(f.fname == name) {
$scope.fruits.splice(i, 1);
}
}
}
}
//批量刪除
$scope.deleAll = function() {
//定义一个开关
var flag = false;
var b = confirm("是否要删除？");
if(b) {
for(var i = $scope.fruits.length - 1; i >= 0; i--) {
var f = $scope.fruits[i];
if(f.ck) {
$scope.fruits.splice(i, 1);
//只要if能进来，就标明至少有一个复选框被选中了
flag=true;
}
}
//判断
if (flag==false) {
alert("至少选一个！")
}
}
}
//减
$scope.jian = function(fname, fsum) {
//减之前，需要判断一下，是否已经是0了
if(fsum == 0) {
alert("不能再减了")
return;
}
fsum--;
for(var i = 0; i < $scope.fruits.length; i++) {
var f = $scope.fruits[i];
if(f.fname == fname) {
f.fsum = fsum;
}
}
}
//加
$scope.jia = function(fname, fsum) {
fsum++;
for(var i = 0; i < $scope.fruits.length; i++) {
var f = $scope.fruits[i];
if(f.fname == fname) {
f.fsum = fsum;
}
}
}
//计算总价的方法
$scope.sum = function() {
var ss = 0;
for(var i = 0; i < $scope.fruits.length; i++) {
var f = $scope.fruits[i];
var s = f.fprice * f.fsum;
ss += s;
}
return ss;
}
//清空购物车
$scope.clear = function() {
$scope.fruits = [];
}
//計算数量
$scope.count = function() {
var ss = 0;
for(var i = 0; i < $scope.fruits.length; i++) {
var f = $scope.fruits[i];
var s = f.fsum*1;
ss += s;
}
return ss;
}
//顯示添加頁面
$scope.add = function() {
$scope.b_show = true;
}
//保存
$scope.save = function() {
//驗證名字
var fname = $scope.name12;
if(fname == "" || fname == null || fname == undefined) {
$scope.name_show = true;
return;
} else {
$scope.name_show = false;
}
//驗證数量
var fsum = $scope.sum12;
if(fsum == "" || fsum == null || fsum == undefined) {
$scope.sum_show = true;
return;
} else {
$scope.sum_show = false;
}
if(fsum <= 0) {
$scope.sum_show = true;
return;
} else {
$scope.sum_show = false;
}
//-------------验证价格-------------
var fprice = $scope.price12;
if(fprice == "" || fprice == null || fprice == undefined) {
$scope.price_show = true;
return;
} else {
$scope.price_show = false;
}
if(fprice <= 0) {
$scope.price_show = true;
return;
} else {
$scope.price_show = false;
}
//-------------验证完毕，添加到数组里面
var obj = {
"fname": fname,
"picurl": "https://img.alicdn.com/bao/uploaded/i2/2540254462/TB2ryuaviOYBuNjSsD4XXbSkFXa_!!2540254462.jpg",
"fprice": fprice,
"fsum": fsum
};
$scope.fruits.push(obj);
//页面隐藏
$scope.b_show = false;
}
});
</script>
</body>
手机案例
猜你喜欢
转载自blog.csdn.net/qq_42609613/article/details/82834152
今日推荐
周排行