web混合开发
来源：互联网 发布：javascript获取子元素 编辑：程序博客网 时间：2024/05/29 07:55
//web综合题
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>购物车</title> <script type="text/javascript" src="anglar/angular.js" ></script> <script> var app=angular.module("myApp",[]); app.controller("myCtrl",function($scope){ $scope.products=[{ 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:"ipad mini", price:2200, state:false }]; //排序 $scope.selOrder; //下拉菜单过滤商品价格范围 $scope.productPrice = "--请选择--"; $scope.isShow = function(price) { if($scope.productPrice == "--请选择--") { return true; } else { var priceArr = $scope.productPrice.split("-"); var min = priceArr[0]; var max = priceArr[1]; if(price < min || price > max) { return false; } else { return true; } } } /*删除*/ $scope.delete=function(name){ var con=confirm("是否删除？"); if(con==true){ for(i in $scope.products){ if(name==$scope.products[i].name){ $scope.products.splice(i,1); } } alert("删除成功"); } } //全选，全不选 $scope.selectAll=false; $scope.selectAllFun=function(){ if($scope.selectAll){ for(index in $scope.products){ $scope.products[index].state=true; } }else{ for(index in $scope.products){ $scope.products[index].state=false; } } } //反选 $scope.checkSelectAll = function() { var a = 0; for(index in $scope.products) { if(!$scope.products[index].state) { $scope.selectAll = false; } else { a++; } if(a == $scope.products.length) { $scope.selectAll = true; } else { $scope.selectAll = false; } } } //批量删除 $scope.delSelect = function() { var arr = []; for(index in $scope.products) { if($scope.products[index].state) { arr.push($scope.products[index].name); } } if(arr.length <= 0) { alert("请先选择删除项"); } else { if(window.confirm("确定删除吗？")) { for(index in arr) { for(index2 in $scope.products) { if(arr[index] == $scope.products[index2].name) { $scope.products.splice(index2, 1); } } } } } } //添加 $scope.hidden=false; $scope.add=function(){ if($scope.hidden){ $scope.hidden=false; }else{ $scope.hidden=true; } } $scope.newId=""; $scope.newName = ""; $scope.newPrice = ""; $scope.addProduct=function(){ if($scope.newName == "" || $scope.newName == null) { alert("id不能为空"); } else if(isNaN($scope.newPrice)) { alert("价格格式不正确") } else if($scope.newId < 0 || $scope.newId > 150) { alert("输入的id不正确") } else { alert($scope.newName); var newProduct={ id:parseInt($scope.newId), name:$scope.newName, price:parseInt($scope.newPrice), }; $scope.products.push(newProduct); } } //修改 $scope.updateShow=false; $scope.updateId=""; $scope.updateName = ""; $scope.updatePrice = ""; $scope.updateShowFun=function(bg){ $scope.updateShow = true; $scope.formShow = false; $scope.updateId=bg.id; $scope.updateName = bg.name; $scope.updatePrice = bg.price; } $scope.updateSub=function(){ if($scope.updateName=="" || $scope.updateName==null){ alert("产品名称为空"); } if($scope.updatePrice=="" || $scope.updatePrice==null){ alert("产品价格为空"); }else if(isNaN($scope.updatePrice)){ alert("产品价格不是整数"); } //验证不满足 for(index in $scope.products) { if(parseInt($scope.updateId) == $scope.products[index].id) { $scope.products[index].name = $scope.updateName; $scope.products[index].price = $scope.updatePrice; $scope.updateShow = false; } } } }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <center> <h3>购物车</h3> <input type="text" placeholder="产品名称" ng-model="search"/>产品价格 <select ng-model="productPrice"> <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="selOrder"> <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="delSelect()">批量删除</button><br /><br /> <table border="1px soild #000" cellpadding="10" cellspacing="0"> <tr> <th> <input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/> </th> <th>产品编号</th> <th>产品名称</th> <th>产品价格</th> <th>操作</th> </tr> <tr ng-repeat="bg in products | filter:{'name':search} | orderBy:selOrder" ng-show="isShow(bg.price)"> <td><input type="checkbox" ng-model="bg.state" ng-click="checkSelectAll()"/></td> <td>{{bg.id}}</td> <td>{{bg.name}}</td> <td>{{bg.price}}</td> <td><button ng-click="delete(bg.name)">删除</button><button ng-click="updateShowFun(bg)">修改</button></td> </tr> </table><br /> <button ng-click="add()">添加新产品</button> <div ng-show="hidden" style="width: 300px;" > <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 /> <button ng-click="addProduct()">保存</button> </div> <!--修改 --> <div ng-show="updateShow" style="width: 300px;" > <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 /> <button ng-click="updateSub()">提交</button> </div> </center> </body></html>阅读全文
0 0
- web混合开发
- 浅谈android、web混合开发
- web前端及混合开发
- PHP 与 Delphi 混合开发 Web 程序
- PHP 与 Delphi 混合开发 Web 程序
- Web开发、原生开发、混合开发的区别优势：
- android web混合开发 混合开发实例——JS与Java的交互
- 利用QT进行web与本地混合应用开发
- 用Qt开发Web和本地混合的应用
- 用Qt开发Web和本地混合的应用
- 用Qt开发Web和本地混合的应用
- 【Qt】Web与本地应用的混合开发
- 用Qt开发Web和本地混合的应用
- QT Web与本地应用的混合开发
- 利用QT进行web与本地混合应用开发
- 【Qt】Web与本地应用的混合开发
- 用Qt开发Web和本地混合的应用
- 利用QT进行web与本地混合应用开发
- Samba配置文件常用参数详解
- springmvc常用注解详解
- map例子：魔法咒语问题
- html页面如何变成jsp页面，如何和后台对接
- OSI 模型与TCP/IP
- web混合开发
- 初识Hibernate(三)之多表关系维护
- 沐枫NOI 2842. 图书管理员（2017年普及组2） 暴力
- Hadoop RPC框架简单理解
- JAVA 用于练手的超简单登录注册，jdbc实现【学习笔记】
- HDOJ Max Sum JAVA 1003
- JavaScript对话框
- bug or function in photo view :fancybox
- 11g降到10g方法
