购物车（angularjs）
来源：互联网 发布：初学c语言 编辑：程序博客网 时间：2024/06/05 12:50
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> tbody tr:nth-child(even) { background: #FFFF80; } tbody tr:nth-child(odd) { background: #80FF80; } tbody tr:hover{ background: #80FFFF; } </style> <script type="text/javascript" src="../bao/angular.js" ></script> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.products = [{ "id": 80, "name": "iPhone", "price": 5400, done:false }, { "id": 1200, "name": "ipad mini", "price": 2200, done:false }, { "id": 500, "name": "ipad air", "price": 2340, done:false }, { "id": 290, "name": "ipad", "price": 1420, done:false }, { "id": 910, "name": "imac", "price": 15400, done:false }]; //筛选年龄 $scope.pricefw="--请选择--"; $scope.xuzhe=function(price) { if($scope.pricefw=="--请选择--") { return true; }else{ var arr=$scope.pricefw.split("-"); var minprice=arr[0]; var maxprice=arr[1]; if(price<minprice||price>maxprice) { return false; }else{ return true; } } } //全选全不选 $scope.allcheck=false; $scope.allselect=function() { if($scope.allcheck) { for(index in $scope.products) { $scope.products[index].done=true; } }else{ for(index in $scope.products) { $scope.products[index].done=false; } } } //反选 $scope.xuzedan=function() { var flag=false; for(index in $scope.products) { if(!$scope.products[index].done) { flag=true; } } if(flag) { $scope.allcheck=false; }else{ $scope.allcheck=true; } } //批量删除 $scope.plsc=function() { if(confirm("你确定批量删除吗?")) { var namearr=[]; for(index in $scope.products) { if($scope.products[index].done){ namearr.push($scope.products[index].name); } } } if(namearr.length<=0) { alert("没有选中项"); }else{ for(index in namearr){ var names=namearr[index]; for(index2 in $scope.products){ if(names==$scope.products[index2].name){ $scope.products.splice(index2,1); alert("删除成功"); } } } } } //单个删除 $scope.delone=function(name) { if(confirm("你确定删除吗?")) { var namearr2=[]; for(index in $scope.products) { if(name==$scope.products[index].name){ namearr2.push($scope.products[index].name); } } } if(namearr2.length>=0) { for(index in namearr2){ var namess=namearr2[index]; for(index2 in $scope.products){ if(namess==$scope.products[index2].name){ $scope.products.splice(index2,1); alert("删除成功"); } } } } } //显示添加商品表 $scope.isgoods=false; $scope.showadd=function() { if($scope.isgoods) { $scope.isgoods=false; }else{ $scope.isgoods=true; $scope.isxiugai=false; } } //添加提交验证 $scope.addId=""; $scope.addName=""; $scope.addPrice=""; $scope.isul=false; $scope.addtj=function() { $scope.addyz=[]; if($scope.addId==""||$scope.addId==null) { $scope.addyz.push("产品编号不能为空"); }else if(isNaN($scope.addId)){ $scope.addyz.push("产品编号不是整数"); } if($scope.addName==""||$scope.addName==null) { $scope.addyz.push("产品名字不能为空"); } if($scope.addPrice==""||$scope.addPrice==null) { $scope.addyz.push("产品价格不能为空"); }else if(isNaN($scope.addPrice)){ $scope.addyz.push("产品价格不是整数"); } if($scope.addyz.length>0) { $scope.isul=true; }else{ var newgoods={ id: parseInt($scope.addId), name: $scope.addName, price: parseInt($scope.addPrice), done:false }; $scope.products.push(newgoods); } } //显示修改表 $scope.updateId=""; $scope.updateName=""; $scope.updatePrice=""; $scope.isxiugai=false; $scope.xiugai=function(pro) { if($scope.isxiugai) { $scope.isxiugai=false; }else{ $scope.updateId=pro.id; $scope.updateName=pro.name; $scope.updatePrice=pro.price; $scope.isxiugai=true; $scope.isgoods=false; } } //修改提交验证 $scope.isul2=false; $scope.updatetj=function() { $scope.updateyz=[]; if($scope.updateName==""||$scope.updateName==null) { $scope.updateyz.push("修改名字不能为空"); } if($scope.updatePrice==""||$scope.updatePrice==null) { $scope.updateyz.push("修改价格不能为空"); }else if(isNaN($scope.updatePrice)){ $scope.updateyz.push("修改价格不是整数"); } if($scope.updateyz.length>0) { $scope.isul2=true; }else{ $scope.isul2=false; for(index in $scope.products) { if($scope.updateId==$scope.products[index].id) { $scope.products[index].name=$scope.updateName; $scope.products[index].price=$scope.updatePrice; $scope.isxiugai=false; } } } } }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <center> <h3>购物车</h3> <input type="text" placeholder="产品名称" ng-model="namegjz" /> 产品价格 <select ng-model="pricefw"> <option>--请选择--</option> <option>0-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="pxfs"> <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="plsc()">批量删除</button> <br /><br /> <table border="1px solid blue" cellpadding="10" cellspacing="0"> <thead> <tr style="background:#FF8080 ;"> <td><input type="checkbox" ng-model="allcheck" ng-click="allselect()"/></td> <td>产品编号</td> <td>产品名称</td> <td>产品价格</td> <td>操作</td> </tr> </thead> <tbody> <tr ng-repeat="sz in products|filter:{'name':namegjz}|orderBy:pxfs" ng-show="xuzhe(sz.price)"> <td><input type="checkbox" ng-model="sz.done" ng-click="xuzedan()"/></td> <td>{{sz.id}}</td> <td>{{sz.name}}</td> <td>{{sz.price}}</td> <td><button ng-click="delone(sz.name)" >删除</button><button ng-click="xiugai(sz)" >修改</button></td> </tr> </tbody> </table><br/> <button ng-click="showadd()">添加商品信息</button><br/> <br/> <div style="width:300px;border:1px solid blue" ng-show="isgoods"> <h3>添加商品</h3> 商品编号:<input type="text" placeholder="商品编号" ng-model="addId"/><br/><br/> 商品名称:<input type="text" placeholder="商品名称" ng-model="addName"/><br/><br/> 商品价格:<input type="text" placeholder="商品价格" ng-model="addPrice"/><br/><br/> <ul style="background:#FFFF80" ng-show="isul"> <li ng-repeat="yz in addyz">{{yz}}</li> </ul> <input type="button" value="提交" ng-click="addtj()" /> </div> <div style="width:300px;border:1px solid blue" ng-show="isxiugai"> <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/> <ul style="background:#FFFF80" ng-show="isul2"> <li ng-repeat="xgyz in updateyz">{{xgyz}}</li> </ul> <input type="button" value="确定修改" ng-click="updatetj()" /> </div> </center> </body></html>
阅读全文
0 0
- 购物车（angularjs）
- 购物车（angularJS）
- （angularjs ）购物车案例
- 【AngularJS】购物车实例
- AngularJS 购物车实例
- AngularJS-购物车Demo
- angularJS 购物车练习
- 购物车AngularJs
- angularJs购物车
- angularjs bootstrap 购物车
- angularjs完成购物车
- AngularJS购物车代码
- 购物车angularJS
- Angularjs 完成购物车
- AngularJs购物车实现
- angularJs 购物车
- angularjs购物车
- AngularJs购物车代码。
- Intent的应用（二）——数据传递
- codeforces 877E. Danil and a Part-time Job (DFS序列+线段树)
- Spark SQL运行原理
- AngualrJS 自定义过滤器
- 八皇后
- 购物车（angularjs）
- uva11582（模算数）
- RxJava——RxJava基础类及使用Java 8的lambda
- Python实现选择排序
- 利用Kali Linux获取http协议加密的账户密码
- poj1691——Painting A Board
- 在Windows7下安装Ubuntu16.04双系统 +在Ubuntu16.04下tensorflow-gpu的搭建（详细图文教程）
- 爬虫程序中-代理服务器的设置
- okhttp的建立
