3:AngularJS:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息
2017-10-23 20:49
911 查看
注:添加球员的功能无指定技术要求,添加球员的页面也无具体样式要求。
1.实现上图页面所有元素,页面布局规整,跟上图效果一致
2.实现文案显示,按效果显示
3.实现查询,实现查询敏感词过滤,实现查询后列表变化
4.实现倒序,实现正序,下拉列表排序效果都实现
5.按钮背景一致,按钮样式
6.实现添加球员页面,添加球员页面样式,添加球员功能,添加球员必填项判断,添加完球员后能显示在表格内,已存在球员判重。
7.表格样式跟上图样式一致
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3:AngularJS:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息</title> <style> *{ margin: auto; padding: 0; } body{ text-align: center; margin: 50px auto; } table { margin-top: 30px; } .btn { background: cornflowerblue; width: 100px; height: 50px; } tr:nth-child(2n){ background: #666; } </style> <script src="../angular-1.5.5/angular.js"></script> <script> //主模板 var myapp=angular.module("myapp",[]); //控制器 myapp.controller("myCtrl",function ($scope) { $scope.data=[ {name:"张三",wei:"控球后卫",hao:"11",piao:"999"}, {name:"李四",wei:"大前锋",hao:"21",piao:"888"}, {name:"王五",wei:"小前锋",hao:"23",piao:"777"}, {name:"赵六",wei:"中锋",hao:"10",piao:"666"}, {name:"周七",wei:"得分后卫",hao:"1",piao:"555"}, ] $scope.name=""; $scope.search2=""; $scope.$watch("name",function (value) { if(value.indexOf("枪")!=-1) { alert("输入内容含有敏感字"); $scope.name=""; } else { $scope.search2=$scope.name; } }) $scope.order="-请选择-"; //排序 $scope.pai=function () { if( $scope.order!="-请选择-") { if( $scope.order=="票数正叙") { console.log("0"); return false; } else { return true; } } return false; } //添加球员 $scope.show=false; $scope.add=function () { $scope.show=true; } $scope.uname=""; $scope.uwei=""; $scope.uhao=""; $scope.upiao=""; $scope.adduser=function () { if( $scope.uname=="" || $scope.uwei=="" || $scope.uhao=="" || $scope.upiao=="") { alert("此项为必填项"); } else { for(var i=0;i<$scope.data.length;i++) { if($scope.data[i].name==$scope.uname) { alert("此球员已存在"); $scope.uname=""; $scope.uwei=""; $scope.uhao=""; $scope.upiao=""; break; } else if(i==$scope.data.length-1) { $scope.data.push({name:$scope.uname,wei:$scope.uwei,hao:$scope.uwei,piao:$scope.upiao}); $scope.uname=""; $scope.uwei=""; $scope.uhao=""; $scope.upiao=""; $scope.show=false; break; } } } } }) </script> </head> <body ng-app="myapp" ng-controller="myCtrl"> 查询:<input type="text" ng-model="name"> 排序: <select ng-model="order"> <option>-请选择-</option> <option>票数倒叙</option> <option>票数正叙</option> </select><br> <button ng-click="add()" class="btn">添加球员</button> <table border="1px soilde #000" width="400px"> <tr> <th>姓名</th> <th>位置</th> <th>球号</th> <th>票数</th> </tr> <tr ng-repeat="item in data|filter:search2|orderBy:'piao':pai()"> <td>{{item.name}}</td> <td>{{item.wei}}</td> <td>{{item.hao}}</td> <td>{{item.piao}}</td> </tr> </table> <table border="1px solide #000" ng-show="show"> <tr> <td>姓名:</td> <td><input type="text" ng-model="uname"></td> </tr> <tr> <td>位置:</td> <td><input type="text" ng-model="uwei"></td> </tr> <tr> <td>球号:</td> <td><input type="text" ng-model="uhao"></td> </tr> <tr> <td>票数:</td> <td><input type="text" ng-model="upiao"></td> </tr> <tr align="center"><td><button ng-click="adduser()">添加</button></td></tr> </table> </body> </html>
相关文章推荐
- AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
- AngularJs+JQuery:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息
- 1. AngularJS+路由+JQuery:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息(路由显示添加页面)
- 2. AngularJs+JQuery:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息
- AngularJS:模糊查询过滤内容,验证判断后添加表格信息
- 隔行变色,选中变色,鼠标变小手样式;姓名查询条件 过滤敏感字符 下拉列表排序 非空验证添加信息 点击按钮删除
- 用户信息:奇偶数隔行变色,选中行变色,鼠标变小手样式;姓名查询条件,过滤敏感字符;下拉列表排序;非空验证添加信息;点击按钮删除
- AngularJS敏感词过滤,下拉菜单排序,表格隔行换色,添加数据
- (angularjs) 数据的增查(添加用户,查询名字,实现排序,判断非空 ,是否是数字,是否重名,敏感字符)
- angularjs-添加数据,姓名查询,过滤敏感字符,下拉菜单查询
- AngularJS综合用户信息, 表单验证,过滤查询,全选反选,批量删除,修改,添加
- AngularJS实现下拉框排序/添加数据/查询数据/敏感字符过滤
- 表格(查询数据 、 排序 、添加数据 、敏感词)
- 添加用户+非空判断+整数判断+敏感字符过滤+排序+奇数行变颜色
- angularJS实现查询/选择排序/添加/敏感字符过滤
- 用户信息的增删改查:非空验证添加,模糊查询,修改密码,批量和全部删除
- angularjs查询删除 过滤敏感信息
- 初学Html5+CSS之表格添加用户+删除用户+修改数据+删除全部+批量删除+查询数据+内容判断
- AngularJS 添加 查询 排序 删除 数据 敏感词
- AngularJS_table添加/批量删除数据/过滤敏感字符