angular简单的购物车

最新推荐文章于 2018-05-31 19:51:12 发布

V563626266

最新推荐文章于 2018-05-31 19:51:12 发布

阅读量253

点赞数

分类专栏：代码文章标签：随便做做

本文链接：https://blog.csdn.net/VS563626266/article/details/79073100

版权

代码专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#add input{
display: block;
}
</style>
<script src="js/angular.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.products = [{
id:1,
pname:"qq",
aprice:12.9,
num:2,
state:false
},{
id:2,
pname:"wx",
aprice:23.9,
num:1,
state:false
},{
id:3,
pname:"wx",
aprice:99.9,
num:1,
state:false
}];

$scope.search = "";

//删除
$scope.del = function(clumn){
for(index in $scope.products){
if($scope.products[index].id == clumn){
$scope.products.splice(index,1);
}
}
}

//计算总价
$scope.allPirce = function(){
$scope.a = 0;
for(index in $scope.products){
$scope.a = $scope.products[index].aprice * $scope.products[index].num + $scope.a;
}
return $scope.a;
};

//下拉菜单排序
$scope.checkOrder = "";
$scope.changeOrder = function(){
if($scope.checkOrder == ""){

}
else if($scope.checkOrder == "num"){
$scope.orderFlag = "";
$scope.orderClumn = "num";
}
else{
$scope.orderFlag = "-";
$scope.orderClumn = "num";
}
};

//减商品数量的操作
$scope.less = function(id){
for(index in $scope.products){
if(id == $scope.products[index].id){
if($scope.products[index].num>1){
$scope.products[index].num--;
}
else{
if(confirm("您确定删除吗?")){
$scope.products.splice(index,1);
}
}
}
}
};

//商品入库
$scope.add = function(){
var p = {
pname:$scope.add_name,
aprice:$scope.add_price,
num:parseInt($scope.add_num)
};
$scope.products.push(p);
$scope.add_name = "";
$scope.add_price = "";
$scope.add_num = "";
$scope.formShow = false;
};

//全选、全不选
$scope.checkAll = false;
$scope.checkAllFun = function(){
if($scope.checkAll){
for(index in $scope.products){
$scope.products[index].state = true;
}
}
else{
for(index in $scope.products){
$scope.products[index].state = false;
}
}
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h2>我的购物车</h2>
<input type="text" placeholder="输入关键字搜索..." ng-model="search"/>
<select ng-model="paixu">
<option value="">-------排序-------</option>
<option value="num">按数量正序排序</option>
<option value="-num">按数量倒序排序</option>
</select>
<button style="background-color: chartreuse; border: hidden;" ng-click="formShow=true">入库</button><br /><br />
<table border="1px" cellpadding="10" cellspacing="0">
<thead align="center">
<tr>
<th><input type="checkbox" ng-model="checkAll" ng-click="checkAllFun()"/></th>
<th>name</th>
<th>price</th>
<th>number</th>
<th>totalPrice</th>
<th>option</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pro in products | filter:{pname:search} | orderBy:paixu" align="center">
<td><input type="checkbox" ng-model="pro.state"/></td>
<td>{{pro.pname}}</td>
<td>{{pro.aprice | currency:"￥"}}</td>
<td><button ng-click="less(pro.id)">-</button>{{pro.num}}<button ng-click="pro.num = pro.num + 1">+</button></td>
<td>{{pro.aprice * pro.num | currency:"￥"}}</td>
<td><button ng-click="del(pro.id)">删除</button></td>
</tr>
<tr>
<td colspan="2" align="right">总价为:</td>
<td ng-bind="allPirce() | currency:'￥'" colspan="4"></td>
</tr>
</tbody>
</table><br />
<form ng-show="formShow">
<h3>添加商品</h3>
商品名称:<input type="text" placeholder="请输入name" ng-model="add_name"/><br /><br />
商品价格:<input type="text" placeholder="请输入price" ng-model="add_price"/><br /><br />
商品数量:<input type="text" placeholder="请输入number" ng-model="add_num"/><br /><br />
<input type="button" value="添加" ng-click="add()"/>
</form>
</center>
</body>
</html>

V563626266

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular简单的购物车

#add input{display: block;}var app = angular.module("myApp",[]);app.controller("myCtrl",function($scope){$scope.products = [{id:1,pname:"qq",aprice:12.9,num:2,state:false},
复制链接

扫一扫