Angular购物车综合题

来源：互联网发布：javescript高级编程编辑：程序博客网时间：2024/05/18 02:51

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
text-align: center;
width:600px;
}
td{
border: 1px solid black;
height: 30px;
}
form{
width: 400px;
background-color: gainsboro;
margin-top: 10px;
}
form input{
display: block;
}
</style>
<script src="../js/angular.min.js"></script>
<script>

//angular.module("myapp",[]).controller("demo1",function($scope){})
var myapp=angular.module("dxtapp",[]);
myapp.controller("demo1",["$scope",function($scope){

$scope.toadd=false;
$scope.goods=[{id:80,name:"iPhone",price:5400,num:1},
{id:1200,name:"ipad mini",price:2200,num:3},
{id:500,name:"ipad air",price:2340,num:2},
{id:290,name:"ipad",price:1420,num:4},
{id:910,name:"imac",price:15400,num:3}
];

//添加
$scope.add=function(){
var uid=$scope.uid;
var uname=$scope.uname;
var uprice=$scope.uprice;
var unum=$scope.unum;
$scope.toadd=false;
$scope.goods.push({id:uid,name:uname,price:uprice,num:unum});
};

//删除
$scope.del=function(obj){
$scope.goods.splice(obj,1);
};

//全选
$scope.ckAll=function(){
for(var i in $scope.goods){

$scope.goods[i].state=$scope.ckall;
}
};

//批量删除
$scope.delAll=function(){
for(var i=0;i<$scope.goods.length;i++){

if($scope.goods[i].state){

$scope.goods.splice(i,1);
i--;
}
}
};

//结算
$scope.count=function(){
var sums=0;
for(var i=0;i<$scope.goods.length;i++){
sums+=$scope.goods[i].price*$scope.goods[i].num;
}
if(sums==0){
alert("您的购物车已经空了");
}
return sums;
};

}])

</script>
</head>
<body ng-app="dxtapp" ng-controller="demo1">
<center>

产品名称<input type="text" value="产品名称" style="width: 60px;" ng-model="sel"/>

产品价格<select ng-model="show">
<option value="">-请选择-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="">全部</option>
</select>

<select ng-model="or">
<option value="">排序方式</option>
<option value="id">按产品编号排序</option>
<option value="name">按产品名称排序</option>
<option value="price">按产品价格排序</option>
</select>
<button ng-click="delAll()">批量删除</button><br /><br />
<table border="1" cellspacing="0">
<tr>
<td><input type="checkbox" ng-model="ckall" ng-click="ckAll()"/>全选</td>
<td>产品编号</td>
<td>产品名称</td>
<td>产品价格</td>
<td>产品数量</td>
<td>小计</td>
<td>操作</td>
</tr>

<tr ng-repeat="g in goods|filter:{name:sel}|limitTo:show|orderBy:or">
<td><input type="checkbox" ng-model="g.state"/></td>
<td>{{g.id}}</td>
<td>{{g.name}}</td>
<td>{{g.price|currency:"￥:"}}</td>
<td>{{g.num}}</td>
<td>{{g.price*g.num|currency:"￥"}}</td>
<td><button ng-click="del($index)">删除</button></td>
</tr>
<tr>
<td colspan="7">结算<span ng-bind="count()|currency:'￥'"></span></td>
</tr>
</table>
<br />
<button ng-click="toadd=true">添加新产品</button>

<form ng-show="toadd">
产品编号:<input type="text" ng-model="uid"/><br />
产品名称:<input type="text" ng-model="uname"/><br />
产品价格:<input type="text" ng-model="uprice"/><br /><br />
产品数量:<input type="text" ng-model="unum" /><br /><br />
<button ng-click="add()" style="margin-left: 30px;">提交</button>
</form>
</center>
</body>
</html>

阅读全文

0 0