HTML各种小功能
来源：互联网 发布：python字符串转二进制 编辑：程序博客网 时间：2024/05/21 00:46
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> <style> table{ border-collapse: collapse; } th,td{ border: 1px solid #000000; } ul li{ color: red; } </style> <script> var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function ($scope) { $scope.data=[{ check:false, name:"iPhone4", names:"张三", phop:12321411, price:4999, addr:"北京", xiad:"08-01 10:00", zt:"发货" },{ check:false, name:"小米6", names:"李四", phop:56478130366, price:2999, addr:"北京", xiad:"08-02 10:00", zt:"发货" },{ check:false, name:"华为P9", names:"王五", phop:68764313, price:3999, addr:"上海", xiad:"09-04 10:00", zt:"已发货" },{ check:false, name:"OPPO R11", names:"赵六", phop:346363443, price:4999, addr:"天津", xiad:"09-04 10:00", zt:"已发货" },{ check:false, name:"VIVO", names:"周七", phop:145674231, price:2999, addr:"重庆", xiad:"10-04 10:00", zt:"已发货" }]; //根据城市查询数据 $scope.addrsize="选择城市"; $scope.addrcx=function (item) { if($scope.addrsize!="选择城市"){ if(item.addr==$scope.addrsize){ return true; }else{ return false; } }else{ return true; } }; //根据选择状态查询数据 $scope.ztsize="选择状态"; $scope.ztcx=function (item) { if($scope.ztsize!="选择状态"){ if(item.zt==$scope.ztsize){ return true; }else{ return false; } } else{ return true; } }; //敏感词 $scope.yhm=""; $scope.yhm2=""; $scope.$watch("yhm",function (value) { if(value.indexOf("枪")!=-1){ alert("包含敏感词"); $scope.yhm=""; }else{ $scope.yhm2=$scope.yhm; } }); //新增订单 $scope.show=false; $scope.xzdd=function () { $scope.show=true; }; //全选,全不选 $scope.checkAll=false; $scope.qx=function () { if($scope.checkAll==true){ for(var i=0;i<$scope.data.length;i++){ $scope.data[i].check=true; } }else{ for(var i=0;i<$scope.data.length;i++){ $scope.data[i].check=false; } } }; //反着选 $scope.dx=function () { var n=0; for(var i=0;i<$scope.data.length;i++){ if($scope.data[i].check==true){ n++; } } if(n==$scope.data.length){ $scope.checkAll=true; }else{ $scope.checkAll=false; } }; //新增订单 $scope.addaddr="选择城市"; $scope.addname=""; $scope.addnames=""; $scope.addphop=""; $scope.shangpin=false; $scope.weishus=false; $scope.weishu=false; $scope.yonghu=false; $scope.shouji=false; $scope.cs=false; $scope.shoujigeshi=false; $scope.tj=function () { if($scope.addname==""){ $scope.shangpin=true; }else{ if($scope.addname.length<6||$scope.addname.length>20){ $scope.shangpin=false; $scope.weishu=true; }else{ if($scope.addnames==""){ $scope.weishu=false; $scope.yonghu=true; }else{ if($scope.addnames.length<6||$scope.addnames.length>20){ $scope.yonghu=false; $scope.weishus=true; }else{ if($scope.addphop==""){ $scope.weishus=false; $scope.shouji=true; }else{ if($scope.addphop.length!=11){ $scope.shouji=false; $scope.shoujigeshi=true; }else{ if($scope.addaddr=="选择城市"){ $scope.shoujigeshi=false; $scope.cs=true; }else{ $scope.data.push({ name:$scope.addname, names:$scope.addnames, phop:$scope.addphop, price:5999, addr:$scope.addaddr, zt:"待发货" }); $scope.cs=false; } } } } } } } }; //发货 $scope.ztgb=function (index) { if($scope.data[index].zt=="发货"){ $scope.data[index].zt="已发货"; } }; //批量发货 $scope.plfh=function () { for(var i=0;i<$scope.data.length;i++){ if($scope.data[i].check==true){ if($scope.data[i].zt=="发货"){ $scope.data[i].zt="已发货"; } } } /* if(a==true){ alert("请勾选要发货的订单!!"); }*/ }; $scope.del=function () { for(var i=0;i<$scope.data.length;i++){ if($scope.data[i].check==true){ $scope.data.splice(i,1); i--; } } }; $scope.sort=function (index) { $scope.sor=index; if($scope.sor==index){ $scope.serve=!$scope.serve } } }); </script></head><body ng-app="myapp" ng-controller="myCtrl"><input type="text" placeholder="用户名搜索" ng-model="yhm"><input type="text" placeholder="手机号搜索" ng-model="sjh"><select ng-model="addrsize"> <option>选择城市</option> <option>北京</option> <option>上海</option> <option>重庆</option> <option>天津</option></select><select ng-model="ztsize"> <option>选择状态</option> <option>发货</option> <option>待发货</option> <option>已发货</option></select><select> <option>开始月份</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option></select>-<select> <option>结束月份</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option></select><br><br><button ng-click="xzdd()">新增订单</button> <button ng-click="plfh()">批量发货</button> <button ng-click="del()">批量删除</button><br><br><table> <thead> <tr> <th><input type="checkbox" ng-click="qx()" ng-model="checkAll">全选</th> <th>ID</th> <th>商品名</th> <th>用户名</th> <th>手机号</th> <th ng-click="sort('price')">价格</th> <th>城市</th> <th ng-click="sort('xiad')">下单时间</th> <th>状态</th> </tr> </thead> <tbody> <tr ng-repeat="item in data|filter:yhm|filter:sjh|filter:addrcx|filter:ztcx|orderBy:sor:serve"> <td><input type="checkbox" ng-model="item.check" ng-click="dx()"></td> <td>{{$index+1}}</td> <td>{{item.name}}</td> <td>{{item.names}}</td> <td>{{item.phop}}</td> <td>{{item.price}}</td> <td>{{item.addr}}</td> <td>{{item.xiad}}</td> <td><button ng-click="ztgb($index)">{{item.zt}}</button></td> </tr> </tbody></table><br><br><table ng-show="show"> <tr> <th colspan="2">新增订单</th> </tr> <tr> <td>商品名</td> <td><input type="text" placeholder="6-20个字符" ng-model="addname"></td> </tr> <tr> <td>用户名</td> <td><input type="text" placeholder="4-16个字符" ng-model="addnames"></td> </tr> <tr> <td>手机号</td> <td><input type="text" ng-model="addphop"></td> </tr> <tr> <td>城市</td> <td><select ng-model="addaddr"> <option>选择城市</option> <option>北京</option> <option>上海</option> <option>重庆</option> <option>天津</option> </select></td> </tr> <tr> <td colspan="2"> <ul> <li ng-show="shangpin">商品名不能为空</li> <li ng-show="yonghu">用户名不能为空</li> <li ng-show="shouji">手机号不能为空</li> <li ng-show="shoujigeshi">手机号格式不对</li> <li ng-show="weishu">必须是6到20位</li> <li ng-show="weishus">必须是6到20位</li> <li ng-show="cs">请选择城市</li> </ul> </td> </tr> <tr> <th colspan="2"><button ng-click="tj()">提交</button></th> </tr></table></body></html>
阅读全文
0 0
- HTML各种小功能
- HTML小功能
- js各种小功能大合集
- PB 各种小功能点(一)
- opencv各种小功能记录总结(5)
- android开发各种小功能大全
- -Android开发各种小功能大全（第一版）
- iOS开发 各种小功能（开发宝典）
- 各种功能
- *+html功能
- 本人在安卓程序开发时用到的各种小功能(一) 屏幕截图
- 【HTML】html 小技巧
- HTML 中各种验证
- html 各种播放媒体
- 各种 html DOCTYPE Declarations
- HTML各种标签总结
- html各种数据校验
- HTML各种兼容性
- 树莓派配置
- Android最简单的Imageview加边框的方法
- 【施工中】【持续更新】部分刷题记录
- HTML 下拉列表框<select>
- viewpager+fragment结合实现滑动
- HTML各种小功能
- 【nginx】Web server各类性能对比
- google earth的网页版
- LeetCode——2. Add Two Numbers
- nohup的使用
- [Python3]爬虫入门之正则表达式
- listview适配器
- _crol_和左移的区别
- js杂乱整理
