AngularJs实现购物车
来源：互联网 发布：interbase数据库 编辑：程序博客网 时间：2024/06/03 06:53
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../agulajs/angular.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.goods=[{
id:80,
name:"iphone",
price:5400,
state:false
},{
id:290,
name:"ipad",
price:1420,
state:false
},{
id:500,
name:"ipad air",
price:2340,
state:false
},{
id:910,
name:"imac",
price:15400,
state:false
},{
id:1200,
name:"iphone mini",
price:2400,
state:false
}];
//删除商品
$scope.del=function(delName){
if(window.confirm("确定要删除吗？？")==true){
for(index in $scope.goods){
if(delName==$scope.goods[index].name){
$scope.goods.splice(index,1);
alert("删除成功");
}
}
}
}
//定义下拉菜单筛选价格
$scope.orderbyy="--请选择--";
$scope.isShow=function(price){
if( $scope.orderbyy=="--请选择--"){
return true;
}else{
var Arr=$scope.orderbyy.split("-");
var min=Arr[0];
var max=Arr[1];
if(price < min || price > max){
return false;
}else{
return true;
}
}
}
//全选
$scope.selectAll=false;
$scope.selectAllFun=function(){
if($scope.selectAll){
for(index in $scope.goods){
$scope.goods[index].state=true;
}
}else{
for(index in $scope.goods){
$scope.goods[index].state=false;
}
}
}
//反选
$scope.checkselectAll=function(){
var a=0;
for(index in $scope.goods){
if(!$scope.goods[index].state){
$scope.selectAll=false;
}else{
a++;
}
if(a==$scope.goods.length){
$scope.selectAll=true;
}else{
$scope.selectAll=false;
}
}
}
//批量删除
$scope.delete=function(){
var arr=[];
for(index in $scope.goods){
if($scope.goods[index].state){
arr.push($scope.goods[index].name);
}
}
if(arr.length<=0){
alert("请输入要删除的商品");
}else{
if(window.confirm("确定要删除吗？？")){
for(index in arr){
for(index2 in $scope.goods){
if(arr[index]==$scope.goods[index2].name){
$scope.goods.splice(index2,1);
}
}
}
}
}
}
//添加新用户
$scope.formShow=false;
$scope.fromShowFun=function(){
if($scope.formShow){
$scope.formShow=false;
}else{
$scope.formShow=true;
$scope.updateShow=false;
}
}
//提交验证
$scope.newId="";
$scope.newName="";
$scope.newPrice="";
$scope.divShow=false;
$scope.checkSub =[];
$scope.sub=function(){
$scope.checkSub =[];
if($scope.newId == "" || $scope.newId == null){
$scope.checkSub.push("产品编号不为空");
}else if(isNaN($scope.newId)){
$scope.checkSub.push("产品编号不是整数");
}
if($scope.newName == "" || $scope.newName == null){
$scope.checkSub.push("产品名称不为空");
}
if($scope.newPrice == "" || $scope.newPrice == null){
$scope.checkSub.push("产品价格不为空");
}else if(isNaN($scope.newPrice)){
$scope.checkSub.push("产品价格不是整数");
}
if($scope.checkSub.length>0){
$scope.divShow=true;
}else{
$scope.divShow=false;
var newPro = {
id:parseInt($scope.newId),
name:$scope.newName,
price:parseInt($scope.newPrice),
state:false
};
$scope.goods.push(newPro);
}
}
//修改界面
$scope.updateShow=false;
$scope.updateId="";
$scope.updateName="";
$scope.updatePrice="";
$scope.updateShowFun=function(user){
$scope.updateShow=true;
$scope.formShow=false;
$scope.updateId=user.id;
$scope.updateName=user.name;
$scope.updatePrice=user.price;
}
$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.haha=true;
}else{
$scope.haha=false;
for(index in $scope.goods){
if(parseInt($scope.updateId) == $scope.goods[index].id){
$scope.goods[index].name = $scope.updateName;
$scope.goods[index].price = parseInt($scope.updatePrice);
$scope.updateShow = false;
}
}
}
}
});
</script>
<style>
table tr:nth-child(odd){
background:orange;
}
table tr:nth-child(even){
background:pink;
}
table tr:hover{
background: red;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>购物车</h3>
<input type="text" placeholder="输入关键字" ng-model="serch" />
<select ng-model="orderbyy">
<option>--请选择--</option>
<option>0-1000</option>
<option>1001-2000</option>
<option>2001-3000</option>
<option>3001-4000</option>
<option>4001-5000</option>
<option>5001-6000</option>
<option>6001-7000</option>
<option>7001-8000</option>
<option>8001-无穷大</option>
</select>
<select ng-model="seletorder">
<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="delete()">批量删除</button>
<table border="1" cellpadding="8" cellspacing="0">
<thead>
<tr>
<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></td>
<td>产品编号</td>
<td>产品名称</td>
<td>产品价格</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in goods|filter:serch|orderBy:seletorder" ng-if="isShow(user.price)" >
<td><input type="checkbox" ng-model="user.state" ng-click="checkselectAll()"/></td>
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.price | currency:"￥"}}</td>
<td>
<button ng-click="del(user.name)">删除</button>
<button ng-click="updateShowFun(user)">修改</button>
</td>
</tr>
</tbody>
</table><br /><br />
<button ng-click="fromShowFun()">添加新产品</button>
<form style="border: 1px solid pink; width: 300px;" ng-show="formShow">
<h3>添加商品</h3>
商品编号:<input type="text" placeholder="商品编号" ng-model="newId" /><br /><br />
商品名称:<input type="text" placeholder="商品名称" ng-model="newName" /><br /><br />
商品价格:<input type="text" placeholder="商品价格" ng-model="newPrice" /><br /><br />
<div style="border: 1px solid blue; width: 250px; background-color: deeppink;" ng-show="divShow">
<ul>
<li ng-repeat="chenk in checkSub">{{chenk}}</li>
</ul>
</div><br/>
<input type="button" value="提交" ng-click="sub()"/>
</form>
<!--修改-->
<form style="border: 1px solid pink; 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="text" placeholder="商品价格" ng-model="updatePrice" /><br /><br />
<div style="border: 1px solid blue; width: 250px; background-color: deeppink;" ng-show="haha">
<ul>
<li ng-repeat="chenk in updateArr">{{chenk}}</li>
</ul>
</div><br/>
<input type="button" value="提交" ng-click="updateSub()"/>
</form>
</center>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../agulajs/angular.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.goods=[{
id:80,
name:"iphone",
price:5400,
state:false
},{
id:290,
name:"ipad",
price:1420,
state:false
},{
id:500,
name:"ipad air",
price:2340,
state:false
},{
id:910,
name:"imac",
price:15400,
state:false
},{
id:1200,
name:"iphone mini",
price:2400,
state:false
}];
//删除商品
$scope.del=function(delName){
if(window.confirm("确定要删除吗？？")==true){
for(index in $scope.goods){
if(delName==$scope.goods[index].name){
$scope.goods.splice(index,1);
alert("删除成功");
}
}
}
}
//定义下拉菜单筛选价格
$scope.orderbyy="--请选择--";
$scope.isShow=function(price){
if( $scope.orderbyy=="--请选择--"){
return true;
}else{
var Arr=$scope.orderbyy.split("-");
var min=Arr[0];
var max=Arr[1];
if(price < min || price > max){
return false;
}else{
return true;
}
}
}
//全选
$scope.selectAll=false;
$scope.selectAllFun=function(){
if($scope.selectAll){
for(index in $scope.goods){
$scope.goods[index].state=true;
}
}else{
for(index in $scope.goods){
$scope.goods[index].state=false;
}
}
}
//反选
$scope.checkselectAll=function(){
var a=0;
for(index in $scope.goods){
if(!$scope.goods[index].state){
$scope.selectAll=false;
}else{
a++;
}
if(a==$scope.goods.length){
$scope.selectAll=true;
}else{
$scope.selectAll=false;
}
}
}
//批量删除
$scope.delete=function(){
var arr=[];
for(index in $scope.goods){
if($scope.goods[index].state){
arr.push($scope.goods[index].name);
}
}
if(arr.length<=0){
alert("请输入要删除的商品");
}else{
if(window.confirm("确定要删除吗？？")){
for(index in arr){
for(index2 in $scope.goods){
if(arr[index]==$scope.goods[index2].name){
$scope.goods.splice(index2,1);
}
}
}
}
}
}
//添加新用户
$scope.formShow=false;
$scope.fromShowFun=function(){
if($scope.formShow){
$scope.formShow=false;
}else{
$scope.formShow=true;
$scope.updateShow=false;
}
}
//提交验证
$scope.newId="";
$scope.newName="";
$scope.newPrice="";
$scope.divShow=false;
$scope.checkSub =[];
$scope.sub=function(){
$scope.checkSub =[];
if($scope.newId == "" || $scope.newId == null){
$scope.checkSub.push("产品编号不为空");
}else if(isNaN($scope.newId)){
$scope.checkSub.push("产品编号不是整数");
}
if($scope.newName == "" || $scope.newName == null){
$scope.checkSub.push("产品名称不为空");
}
if($scope.newPrice == "" || $scope.newPrice == null){
$scope.checkSub.push("产品价格不为空");
}else if(isNaN($scope.newPrice)){
$scope.checkSub.push("产品价格不是整数");
}
if($scope.checkSub.length>0){
$scope.divShow=true;
}else{
$scope.divShow=false;
var newPro = {
id:parseInt($scope.newId),
name:$scope.newName,
price:parseInt($scope.newPrice),
state:false
};
$scope.goods.push(newPro);
}
}
//修改界面
$scope.updateShow=false;
$scope.updateId="";
$scope.updateName="";
$scope.updatePrice="";
$scope.updateShowFun=function(user){
$scope.updateShow=true;
$scope.formShow=false;
$scope.updateId=user.id;
$scope.updateName=user.name;
$scope.updatePrice=user.price;
}
$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.haha=true;
}else{
$scope.haha=false;
for(index in $scope.goods){
if(parseInt($scope.updateId) == $scope.goods[index].id){
$scope.goods[index].name = $scope.updateName;
$scope.goods[index].price = parseInt($scope.updatePrice);
$scope.updateShow = false;
}
}
}
}
});
</script>
<style>
table tr:nth-child(odd){
background:orange;
}
table tr:nth-child(even){
background:pink;
}
table tr:hover{
background: red;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>购物车</h3>
<input type="text" placeholder="输入关键字" ng-model="serch" />
<select ng-model="orderbyy">
<option>--请选择--</option>
<option>0-1000</option>
<option>1001-2000</option>
<option>2001-3000</option>
<option>3001-4000</option>
<option>4001-5000</option>
<option>5001-6000</option>
<option>6001-7000</option>
<option>7001-8000</option>
<option>8001-无穷大</option>
</select>
<select ng-model="seletorder">
<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="delete()">批量删除</button>
<table border="1" cellpadding="8" cellspacing="0">
<thead>
<tr>
<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></td>
<td>产品编号</td>
<td>产品名称</td>
<td>产品价格</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in goods|filter:serch|orderBy:seletorder" ng-if="isShow(user.price)" >
<td><input type="checkbox" ng-model="user.state" ng-click="checkselectAll()"/></td>
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.price | currency:"￥"}}</td>
<td>
<button ng-click="del(user.name)">删除</button>
<button ng-click="updateShowFun(user)">修改</button>
</td>
</tr>
</tbody>
</table><br /><br />
<button ng-click="fromShowFun()">添加新产品</button>
<form style="border: 1px solid pink; width: 300px;" ng-show="formShow">
<h3>添加商品</h3>
商品编号:<input type="text" placeholder="商品编号" ng-model="newId" /><br /><br />
商品名称:<input type="text" placeholder="商品名称" ng-model="newName" /><br /><br />
商品价格:<input type="text" placeholder="商品价格" ng-model="newPrice" /><br /><br />
<div style="border: 1px solid blue; width: 250px; background-color: deeppink;" ng-show="divShow">
<ul>
<li ng-repeat="chenk in checkSub">{{chenk}}</li>
</ul>
</div><br/>
<input type="button" value="提交" ng-click="sub()"/>
</form>
<!--修改-->
<form style="border: 1px solid pink; 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="text" placeholder="商品价格" ng-model="updatePrice" /><br /><br />
<div style="border: 1px solid blue; width: 250px; background-color: deeppink;" ng-show="haha">
<ul>
<li ng-repeat="chenk in updateArr">{{chenk}}</li>
</ul>
</div><br/>
<input type="button" value="提交" ng-click="updateSub()"/>
</form>
</center>
</body>
</html>
阅读全文
0 0
- AngularJs购物车实现
- angularjs实现购物车
- AngularJs实现购物车
- AngularJS 实现简单购物车
- angularJS实现购物车功能
- angularJS实现购物车订单
- AngularJS实现购物车(一)
- AngularJS实现购物车(二)
- angularJs入门之购物车实现
- bootstrap angularjs 实现jsp页面购物车
- angularjs实现的购物车功能
- AngularJs实现简单的购物车
- Angularjs实现简单的购物车
- angularJS--购物车实现全选/取消全选
- AngularJs简单购物车的实现
- angularjs简单实现购物车需求
- angularjs实现购物车的一些功能
- 【AngularJS】购物车实例
- Only the original thread that created a view hierarchy can touch its views
- 如何抓取关机闹钟（Poweroff Alarm）相关log?
- 树莓派-wiringPi-GPIO
- 【Scikit-Learn 中文文档】使用 scikit-learn 介绍机器学习 | ApacheCN
- 多线程下载+断点续传+播放视频
- AngularJs实现购物车
- BZOJ1004：[HNOI2008]Cards （Burnside引理+DP+Exgcd）
- 自定义注解
- linux下操作mysql
- MVP加泛型，抽基类，解绑，多条目
- 关于Ijkitplayer配置
- 学习笔记——冒泡排序的优化
- 将H5网站转换成原生体验的App
- HDOJ Doing Homework again JAVA 1789
