AngularJS购物车应用-CSDN博客

本文链接：https://blog.csdn.net/weixin_40977665/article/details/79095186

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCrty1",function($scope){
//加入数据
$scope.dates = [{
id:1001,
name:"小米1",
price:300,
num:1,
state:false
},{
id:1002,
name:"小米2",
price:200,
num:1,
state:false
},{
id:1003,
name:"小米3",
price:100,
num:1,
state:false
},{
id:1004,
name:"小米4",
price:500,
num:1,
state:false
},{
id:1005,
name:"小米5",
price:600,
num:1,
state:false
}
];
//点击根据名字删除
$scope.del = function(na){
if (window.confirm("确定删除" + na + "吗？")) {
for (index in $scope.dates) {
if (na == $scope.dates[index].name) {
$scope.dates.splice(index,1);
}
}
}
}
//点击减号减去对应的数量
$scope.jian = function(id){
var index=0;//

for(var i=0;i<$scope.dates.length;i++){

if ($scope.dates[i].id == id) {
index=i;
}
}

if ($scope.dates[index].num > 1) {
$scope.dates[index].num--;
}else{
alert("到底了!");
}
}
//点击加号加上对应的数量
$scope.jia = function(id){
index = 0;
for(var i=0;i<$scope.dates.length;i++){

if ($scope.dates[i].id == id) {
index=i;
}
}
$scope.dates[index].num++;
}
//总价格
$scope.prices = function(){
var p = 0;
for (var x = 0; x < $scope.dates.length; x++) {
p += $scope.dates[x].num*$scope.dates[x].price;
}
return p;
}
//总数量
$scope.countent = function(){
var p = 0;
for (var x = 0; x < $scope.dates.length; x++) {
p += $scope.dates[x].num;
}
return p;
}
$scope.add = function(){
var adderror=[]; //判断非空必须为数字

if($scope.ID == "" || $scope.ID == null){
alert("id不能为空");
adderror.push("id不能为空");
}else if (isNaN($scope.ID)) {
alert("id必须为数字");
adderror.push("ID必须为数字");
}

if ($scope.IDname == "" || $scope.IDname == null) {
alert("商品不能为空");
adderror.push("商品不能为空");
}

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

if ($scope.IDprice == "" || $scope.IDprice == null) {
alert("单价不能为空");
adderror.push("单价不能为空");
}else if (isNaN($scope.IDprice)) {
alert("单位必须为数字");
adderror.push("单位必须为数字");
}
//点击添加显示数据
if(adderror.length==0){
$scope.dates.push( {
id:$scope.ID,
name:$scope.IDname,
price:$scope.IDprice,
num:$scope.IDnum
});
}
}
//全选、全不选
$scope.selectAll = false;
$scope.selectAllFun = function(){
if ($scope.selectAll) {
for(index in $scope.dates){
$scope.dates[index].state = true;
}
}else{
for (index in $scope.dates) {
$scope.dates[index].state = false;
}
}
}
//批量删除，
$scope.delSelect = function(){
//定义一个空数组
var arr = [];
for (index in $scope.dates) {
if ($scope.dates[index].state) {
arr.push($scope.dates[index].name);
}
}
if (arr.length <= 0) {
alert("请重新选择删除的项目");
}else{
if (window.confirm("确定要删除吗？")) {
for(index in arr){
for (index2 in $scope.dates) {
if (arr[index] == $scope.dates[index2].name) {
$scope.dates.splice(index2,1);
}
}
}
}else{
alert("您以取消删除");
}
}
}
//修改页面
$scope.updateShow = false;
$scope.updateId = "";
$scope.updatePrice = "";
$scope.updateNum = "";
$scope.updateName = "";
$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.dates) {
if (parseInt($scope.updateId) == $scope.dates[index].id) {
$scope.dates[index].name = $scope.updateName;
$scope.dates[index].price = $scope.updatePrice;
$scope.dates[index].num = $scope.updateNum;
$scope.updateShow = false;
}

}
}
}

});
</script>
<style>
/**
* 隔行变色
*/
.css1{
background-color: darkcyan;
}
.css2{
background-color: salmon;
}
/**
* 按钮边小手
*/
.sb{
cursor: pointer;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCrty1">
<center>
<input type="text" placeholder="请输入商品" ng-model="search" />
<select ng-model="selOrder">
<option value="">---数量排序---</option>
<option value="num">数量正序</option>
<option value="-num">数量倒叙</option>
</select>
<button ng-click="delSelect()" class="sb">批量删除</button><br />
<table border="1px" cellspacing="0" cellpadding="8" >
<thead>
<tr align="center" style="background-color: pink;">
<td>
<input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" />
</td>
<br />
<br />
<td width="100px">商品编号：</td>
<td width="100px">商品名称：</td>
<td width="230px">商品数量：</td>
<td width="100px">商品单价：</td>
<td width="100px">商品总价：</td>
<td width="110px">商品操作：</td>
</tr>
</thead>
<tbody>
<tr ng-repeat = "a in dates | 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.id)">-</button>
<input type="number" ng-model="a.num" />
<button ng-click="jia(a.id)">+</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()}}      总数量：{{countent()}}
</h3>
<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>
<br />
<br />
</form>
<form style="border: 1px solid cyan; width: 300px;" ng-show="updateShow">
<h3>修改商品</h3>
商品编号：<input type="text" placeholder="商品编号" ng-model="updateId" /><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 blueviolet; widows: 250px; background-color: greenyellow;" 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>

删除修改