angularjs购物车

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
//加入假数据
$scope.datas = [{
id: 1001,
name: "iphone7",
price: 6888,
num: 1,
state: false
},
{
id: 1002,
name: "iphone8",
price: 7888,
num: 1,
state: false
}, {
id: 1003,
name: "iphoneX",
price: 8888,
num: 1,
state: false
}
];
//点击根据名字删除
$scope.del = function(na) {
if(window.confirm("你确定删除" + na + "吗")) {
for(index in $scope.datas) {
if(na == $scope.datas[index].name) {
$scope.datas.splice(index, 1);
}
}
}
}
//点击-号减去数量
$scope.jian = function(name) {
for(index in $scope.datas) {
if(name == $scope.datas[index].name) {
if($scope.datas[index].num > 1) {
$scope.datas[index].num--;
} else {
alert("不能再减啦！，你可以删除商品")
}
}
}
}

//点击+号增加数量
$scope.jia = function(name) {
for(index in $scope.datas) {
if(name == $scope.datas[index].name) {
$scope.datas[index].num++;
}
}

}
//总价格
$scope.prices = function() {
var p = 0;
for(var x = 0; x < $scope.datas.length; x++) {
p += $scope.datas[x].num * $scope.datas[x].price;
}
return p;
}
//总数量
$scope.content = function() {
var p = 0;
for(var x = 0; x < $scope.datas.length; x++) {
p += $scope.datas[x].num;
}
return p;
}

$scope.add = function() {
var flag1 = false;
var flag2 = false;
var flag3 = false;
var flag4 = false;
//判断非空必须为数字
if($scope.ID == "" || $scope.ID == null) {
alert("id不能为空");
flag1 = false;
} else if(isNaN($scope.ID)) {
alert("id必须为数字");
flag1 = false;
} else {
flag1 = true;
}

if($scope.IDname == "" || $scope.IDname == null) {
alert("商品不能为空");
flag2 = false;
} else {
flag2 = true;
}

if($scope.IDnum == "" || $scope.IDnum == null) {
alert("数量不能为空");
flag3 = false;
} else if(isNaN($scope.IDnum)) {
alert("数量必须为数字");
flag3 = false;
} else {
flag3 = true;
}

if($scope.IDprice == "" || $scope.IDprice == null) {
alert("单价不能为空");
flag4 = false;
} else if(isNaN($scope.IDprice)) {
alert("单价必须为数字");
flag4 = false;
} else {
flag4 = true;
}
//点击添加显示数据
if(flag1 && flag2 && flag3 && flag4) {
$scope.datas.push({
id: $scope.ID,
name: $scope.IDname,
num: $scope.IDnum,
price: $scope.IDprice
});
}

}

//全选反选
$scope.selectAll = false;
$scope.selectAllFun = function() {
if($scope.selectAll) {
for(index in $scope.datas) {
$scope.datas[index].state = true;
}
} else {
for(index in $scope.datas) {
$scope.datas[index].state = false;
}
}
}

//批量删除
$scope.delSelect = function() {
//定义一个空数组
var arr = [];
for(index in $scope.datas) {
if($scope.datas[index].state) {
arr.push($scope.datas[index].name);
}
}
if(arr.length <= 0) {
alert("请重新选择删除的项目！");
} else {
if(window.confirm("确定要删除吗?")) {
for(index in arr) {
for(index2 in $scope.datas) {
if(arr[index] == $scope.datas[index2].name) {
$scope.datas.splice(index2, 1);
}
}
}
} else {
alert("你已取消删除！");
}
}
}

//修改页面
$scope.updateShow = false;
$scope.updateId = "";
$scope.updateName = "";
$scope.updateNum = "";
$scope.updatePrice = "";
$scope.updateShowFun = function(aa) {
if(window.confirm("你确定要修改吗？请在考虑一下！")) {
$scope.updateShow = true;
$scope.updateId = aa.id;
$scope.updateName = aa.name;
$scope.updateNum = aa.num;
$scope.updatePrice = aa.price;
} else {
alert("你已经取消了修改哟！");
}
}
$scope.updateSub = function() {
$scope.updateArr = [];
if($scope.updateName == "" || $scope.updateName == null) {
$scope.updateArr.push("产品名称为空");
}
if($scope.updatePrice == "" || $scope.updatePrice == null) {
$scope.updateArr.push("产品价格为空");
} else if(isNaN($scope.updatePrice)) {
$scope.updateArr.push("产品价格不是整数");
}

//验证不满足
if($scope.updateArr.length > 0) {
$scope.yz = true;
} else {
$scope.yz = false;
for(index in $scope.datas) {
if(parseInt($scope.updateId) == $scope.datas[index].id) {
$scope.datas[index].name = $scope.updateName;
$scope.datas[index].num = $scope.updateNum;
$scope.datas[index].price = $scope.updatePrice;
$scope.updateShow = false;
} else {
alert("验证成功！");
}
}
}
}

});
</script>
<style>
.css1 {
background-color: antiquewhite;
}

.css2 {
background-color: burlywood;
}

.sb {
cursor: pointer;
}
</style>
</head>

<body ng-app="myApp" ng-controller="myCtrl">

<center>

<input type="text" placeholder="请输入查询商品" ng-model="search" /> 数量排序:
<select ng-model="selOrder">
<option value="num">数量正序</option>
<option value="-num">数量倒序</option>
</select>
<button ng-click="delSelect()" class="sb">批量删除</button><br />
<table border="2" cellspacing="0" width="800">
<thead>
<tr align="center" style="background-color: #DCDCDC;">
<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /></td>
<td width="100px">商品编号</td>
<td width="100px">商品名称</td>
<td width="250px">商品数量</td>
<td width="100px">商品单价</td>
<td width="100px">商品总价</td>
<td width="110px">商品操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in datas | filter:{name:search}| orderBy:selOrder " class="{{ $even ? 'css1':'css2'}}" align="center">
<td><input type="checkbox" ng-model="a.state" /></td>
<td>{{a.id}}</td>
<td>{{a.name}}</td>
<td>
<button ng-click="jian(a.name)">-</button>
<input type="number" ng-model="a.num" />
<button ng-click="jia(a.name)">+</button>
</td>
<td>{{a.price}}</td>
<td>{{a.price*a.num}}</td>
<td><button ng-click="del(a.name)" class="sb">删除</button>
<button ng-click="updateShowFun(a)" class="sb">修改</button>
</td>
</tr>
</tbody>
</table>
<h3>总金额:{{prices()}}      总数量:{{content()}}</h1>
<form style="border: 1px solid yellow; width: 300px;">
<h3>添加商品</h3> 商品编号:
<input type="text" ng-model="ID" /><br /><br /> 商品名称:
<input type="text" ng-model="IDname" /><br /><br /> 商品数量:
<input type="number" ng-model="IDnum" /><br /><br /> 商品单价:
<input type="text" ng-model="IDprice" /><br /><br />
<button ng-click="add()" class="sb">添加</button>
</form>
<form style="border: 1px solid blue; width: 300px;" ng-show="updateShow">
<h3>修改商品</h3> 商品编号:
<input type="text" placeholder="商品编号" ng-model="updateId" disabled="disabled" /><br /><br /> 商品名称:
<input type="text" placeholder="商品名称" ng-model="updateName" /><br /><br /> 商品数量:
<input type="number" placeholder="商品数量" ng-model="updateNum" /><br /><br /> 商品单价:
<input type="text" placeholder="商品单价" ng-model="updatePrice" /><br /><br />
<div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="yz">
<ul>
<li ng-repeat="chenk in updateArr">{{chenk}}</li>
</ul>
</div><br />
<input type="button" value="提交" ng-click="updateSub()" class="sb" />
</form>
</center>
</body>

</html>

猜你喜欢