全面的购物车

最新推荐文章于 2018-01-29 15:09:53 发布

yifeng_csdn

最新推荐文章于 2018-01-29 15:09:53 发布

阅读量181

点赞数

本文链接：https://blog.csdn.net/GGGalaxie/article/details/78862596

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>

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

<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.shops = [{
"id": 80,
"name": "iPhone",
"price": 5400,
"num":10,
"state": false
}, {
id: 1200,
name: "ipad mini",
price: 2200,
num:20,
state: false
}, {
id: 500,
name: "ipad air",
price: 2340,
num:30,
state: false
}, {
id: 29,
name: "ipad",
price: 1420,
num:40,
state: false
}, {
id: 910,
name: "imac",
price: 6600,
num:50,
state: false
}];

//下拉菜单排序

$scope.orderSel="";
//删除当前项
$scope.delete=function(name,state){
if(state){
if(window.confirm("确定要删除"+name+"吗?")){
for(index in $scope.shops){
if(name==$scope.shops[index].name){
$scope.shops.splice(index,1);
}
}
}
}else{
alert("请先选择");
}
}
//修改价格
$scope.update=function(shop){
var newPrice=window.prompt("请输入要修改的"+shop.name+"商品的价格",shop.price);
if(newPrice==null || newPrice==""){
alert("商品价格不能为空")
}else{
shop.price=parseInt(newPrice);
}
}
//对数量的增加
$scope.more=function(shop){
shop.num++;
}
//对数量的减少
$scope.less=function(shop){
if(shop.num>=1){
shop.num--;
}else{

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

$scope.checkAll=function(){
var flag=false;
for(index in $scope.shops){
if(!$scope.shops[index].state){
flag=true
}
}
if(flag){
$scope.selectAll=false;
}else{
$scope.selectAll=true
}
}
//批量删除

$scope.deleteSel=function(){
var arr=[];
for(index in $scope.shops){
if($scope.shops[index].state){
arr.push($scope.shops[index].name)
}
}
if(arr.length<=0){
alert("请先选择")
}else{
if(window.confirm("确定要删除吗?")){
for(index1 in arr){
for(index2 in $scope.shops){
if(arr[index1]==$scope.shops[index2].name){
$scope.shops.splice(index2,1);
}
}
}
}else{

}
}
}
//添加商品
$scope.isShow=false;
$scope.showForm=function(){
if($scope.isShow){
$scope.isShow=false;
}else{
$scope.isShow=true;
}

}
//提交按钮
$scope.submit = function() {
$scope.errorArr = [];
//判断id是否为空
if($scope.newId == null || $scope.newId == "") {
alert("ID不能为空");
} else if(isNaN($scope.newId)) {
alert("ID必须是数字");
}
if($scope.newName == null || $scope.newName == "") {
alert("产品名称不能为空");
} else {
for(index in $scope.shops) {
if($scope.shops[index].name == $scope.newName) {
alert("产品名称不能重复");
}
}
}
if($scope.newPrice == null || $scope.newPrice == "") {
alert("价格不能为空");
} else if(isNaN($scope.newPrice)) {
alert("价格必须是数字");
}

if($scope.errorArr.length > 0) {
//显示列表
$scope.isShow2 = true;
} else {
$scope.isShow2 = false;
//添加商品
var newShop = {
id: parseInt($scope.newId),
name: $scope.newName,
price: parseInt($scope.newPrice),
num:1,
state: false
};
$scope.shops.push(newShop);
$scope.isShow = false;
}
}




});

</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>商品列表</h3><br /><br />

<input type="text" placeholder="请输入商品名称" ng-model="select"/>

<select ng-model="orderSel">
<option value="">--请选择--</option>
<option value="id">--id正序--</option>
<option value="-id">--id逆序--</option>
<option value="price">--价格正序--</option>
<option value="-price">--价格逆序--</option>
</select>

<button ng-click="deleteSel()">批量删除</button>
<br /><br />
<table border="1" cellspacing="0" width="600px">
<thead>
<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>产品数量</th>
<th>操作</th>
</thead>

<tbody>
<tr ng-repeat="shop in shops | filter :{name:select} |orderBy:orderSel" align="center">
<td><input type="checkbox" ng-model="shop.state" ng-click="checkAll()"/></td>
<td>{{shop.id}}</td>
<td>{{shop.name}}</td>
<td>{{shop.price}}</td>
<td>
<button ng-click="less(shop)">-</button>
<input type="text" ng-model="shop.num"/>
<button ng-click="more(shop)">+</button>
</td>
<td>
<button ng-click="delete(shop.name,shop.state)">删除</button>
<button ng-click="update(shop)">修改</button>
</td>
</tr>
</tbody>
</table><br />

<button ng-click="showForm()">添加商品</button>
<fieldset style="width: 600px;" ng-show="isShow">
<legend>添加商品</legend>

<form>
产品编号： <input type="text" ng-model="newId" /><br /><br />
产品名称：<input type="text" ng-model="newName" /><br /><br />
产品价格： <input type="text" ng-model="newPrice" /><br /><br />

<button ng-click="submit()">提交</button>

</form>

</fieldset>
</center>

</body>
</html>