所
来源:互联网 发布:淘宝联盟保持高佣金 编辑:程序博客网 时间:2024/04/28 17:09
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="angular-1.3.0.js"></script> <script type="text/javascript" src="jquery.1.12.4.js"></script> <style> #ss tr:nth-child(even){ background-color: azure; } #ss tr:nth-child(odd){ } </style> <script type="text/javascript"> var app = angular.module("myapp",[]); app.filter("specialChar", function () { return function (value, flag) { var chars = flag.split("|"); for (var i in chars) { if (value.indexOf(chars[i]) >= 0) { return "屏蔽该行,出现违规字符!"; } } return value; } }); app.controller("myCtrl",function($scope){ $scope.user=[ { id:1, name:"张三", wei:"控球后卫", qiu:11, piao:1 },{ id:2, name:"李四", wei:"大前锋", qiu:21, piao:2 },{ id:3, name:"王五", wei:"小前锋", qiu:23, piao:7 },{ id:4, name:"赵六", wei:"中锋", qiu:10, piao:6 },{ id:5, name:"周七", wei:"得分后卫", qiu:1, piao:5 } ]; var id=5; $scope.addUserhehe=function(){ if($scope.a_name!=null&&$scope.a_name!=""&&$scope.a_name!=undefined&&$scope.a_wei!=null&&$scope.a_wei!=""&&$scope.a_wei!=undefined&&$scope.a_qiu!=null&&$scope.a_qiu!=""&&$scope.a_qiu!=undefined&&$scope.a_piao!=null&&$scope.a_piao!=""&&$scope.a_piao!=undefined){ var bo=true; for(var i in $scope.user){ if($scope.user[i].name==$scope.a_name){ bo=false; break; }else{ bo=true; } } if(bo){ $scope.user.push({ id:++id, name:$scope.a_name, wei:$scope.a_wei, qiu:$scope.a_qiu, piao:$scope.a_piao }) $scope.a_name=""; $scope.a_wei=""; $scope.a_qiu=""; $scope.a_piao=""; $scope.addUserIsShow=false; }else{ alert("已经有次名字了"); } }else{ alert("所填项不能为空!"); } }; var old_user=$scope.user; $scope.xun=function(){ $scope.user=[]; var chars = $scope.cha.split("|"); if(chars=="习近平"||chars=="江泽民"){ alert("出现违规字符!"); }else{ for(var i in old_user){ if(old_user[i].name==$scope.cha){ $scope.user.push(old_user[i]); } if($scope.cha==null||$scope.cha==""||$scope.cha==undefined){ $scope.user.push(old_user[i]); } } } } $scope.add=function(){ $scope.addUserIsShow=true; }; }); </script></head><body ng-app="myapp"><div></div><div ng-controller="myCtrl"><table> <tr> <td>查询</td> <td>排序</td> </tr> <tr> <td><input type="text" ng-model="cha" ng-change="xun()"></td> <td> <select ng-model="xuan" ng-change="search()"> <option value="-piao">票数倒序</option> <option value="piao">票数正序</option> </select> </td> </tr> <tr> <td><button style="background-color: aqua;padding: 2px 5px" ng-click="add()">新增学员</button></td> </tr></table><table border="1" width="500px" id="ss"> <tr style="background-color: darkgray"> <td>姓名</td> <td>位置</td> <td>球号</td> <td>票数</td> </tr> <tr ng-repeat="u in user| orderBy:xuan"> <td>{{u.name}}</td> <td>{{u.wei}}</td> <td>{{u.qiu}}</td> <td>{{u.piao}}</td> </tr></table> <div ng-show="addUserIsShow"> <table> <tr> <td>用户名</td> <td><input type="text" ng-model="a_name"></td> </tr> <tr> <td>位置</td> <td><input type="text" ng-model="a_wei"></td> </tr> <tr> <td>球号</td> <td><input type="text" ng-model="a_qiu"></td> </tr> <tr> <td>票数</td> <td><input type="number" ng-model="a_piao"></td> </tr> <tr> <td colspan="2" align="center"><button ng-click="addUserhehe()">提交</button></td> </tr> </table> </div></div></body></html>
阅读全文
0 0
- 所
- 所调查所发生
- 所见所感
- 所感所悟
- 所言
- 所难过
- 搜索所所搜索所所搜索算
- 所悟
- 所愿
- 司法所
- 所感
- 总结今天的所做所为
- 所见、所想、所悟、所得...
- 心之所至,无所不成
- 《大数据时代》所记所感
- 2015-9-9所遇所见
- 无所舍,必无所获
- 回家路途之所见、所感
- 高通sensor架构实例分析之三(adsp上报数据详解、校准流程详解)
- 5404. 【NOIP2017提高A组模拟10.10】Graph
- vue-awesome-swiper
- JZOJ5419. 【NOIP2017提高A组集训10.24】筹备计划
- 各种软件安装包
- 所
- 大数据搜索选开源还是商业软件?ElasticSearch对比Splunk
- oracle之多表查询
- 《大数据实践课》开创实践教学新模式:清华大数据能力提升项目特色课程系列报道之一
- [2017纪中10-22]友谊 DP
- angular 排序多种方法
- 简易页面排序操作
- GreenDao之一基本使用(ToOne,ToMany都附源代码)
- Spring Boot(三):RestTemplate提交表单数据的三种方法