AngularJS+查询+敏感字+排序+添加
来源:互联网 发布:淘宝开店考试 编辑:程序博客网 时间:2024/05/19 18:38
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>球队</title> <style> *{ margin: 0 auto; } .box{ width: 800px; height: 700px; padding-top: 20px; } .left{ float: left; width: 350px; height: 100px; } .right{ float: right; width: 350px; height: 100px; } .bottom{ width: 750px; height: 500px; float: left; } .bottom button{ width: 180px; height: 40px; background: deepskyblue; font-size: 20px; } .box2{ width: 300px; height: 100px; } </style> <script src="angular-1.5.5/angular.min.js"></script> <script> var app = angular.module("myapp",[]); app.controller("mycont",function ($scope) { //初始化球员数据 $scope.data = [{ name:"张三", wz:"控球后卫", qh:"11", ps:999 },{ name:"李四", wz:"大前锋", qh:"21", ps:888 },{ name:"王五", wz:"小前锋", qh:"23", ps:777 },{ name:"赵六", wz:"中锋", qh:"10", ps:666 },{ name:"李敏", wz:"得分后卫", qh:"1", ps:555 }]; //添加球员 $scope.show = false; $scope.add = function () { $scope.show = true; } $scope.adds = function () { //判断信息是否完整 if ($scope.name != null&&$scope.wz != null&&$scope.qh != null){ for (var i=0;i<$scope.data.length;i++){ //判断球员是否存在 if ($scope.data[i].name == $scope.name){ alert("球员已存在!!!"); return; } } $scope.data.push({name:$scope.name, wz:$scope.wz, qh:$scope.qh, ps:1}); } else { alert("请填入球员完整信息!!!"); return; } //初始化、隐藏添加框 $scope.name=""; $scope.wz=""; $scope.qh=""; $scope.show = false; } //过滤敏感字 $scope.search = ""; $scope.search2 = ""; $scope.$watch("search",function (value) { if (value.indexOf("#")!=-1) { alert("敏感字"); } else { $scope.search2 = $scope.search; } }) /*//排序 $scope.order = "票数排序"; $scope.fun=function(){ if($scope.sort!="--请选择--"){ if($scope.sort=="倒序"){ $scope.revers=true; }else if($scope.sort=="正序"){ $scope.revers=false; } } };*/ }) </script></head><body ng-app="myapp" ng-controller="mycont"> <div class="box"> <!--查询表--> <div class="left"> <h4>查询</h4> <input type="text" ng-model="search" style="width: 300px; height: 30px"> </div> <!--p排序表--> <div class="right"> <h4>排序</h4> <select style="width: 300px; height: 36px" ng-model="order"><!--ng-change="fun()"--> <option>票数排序</option> <option value="-ps">倒序</option> <option value="ps">正序</option> </select> </div> <div class="bottom"> <button ng-click="add()">新增球员</button> <br/><br/><br/> <!--球员信息表--> <table border="soild 1px #000" cellspacing="0" width="100%" style="height: 300px"> <thead style="background: #999999"> <tr> <td>姓名</td> <td>位置</td> <td>球号</td> <td>票数</td> </tr> </thead> <tbody> <tr ng-repeat="item in data|filter:search2|orderBy:order"><!--|filter:{name:search}--><!--orderBy:'ps':revers--> <td>{{item.name}}</td> <td>{{item.wz}}</td> <td>{{item.qh}}</td> <td>{{item.ps}}</td> </tr> </tbody> </table> </div> </div> <!--添加球员信息框--> <div ng-show="show" class="box2"> 姓名:<input type="text" ng-model="name"><br> 位置:<input type="text" ng-model="wz"><br> 球号:<input type="text" ng-model="qh"><br> <button ng-click="adds()">完成</button> </div></body></html>
阅读全文
0 0
- AngularJS+查询+敏感字+排序+添加
- AngularJS+查询+敏感字+排序+添加
- angularJS实现查询/选择排序/添加/敏感字符过滤
- AngularJS 添加 查询 排序 删除 数据 敏感词
- angularjs添加排序查询
- angularjs排序、查询、添加
- AngularJS实现下拉框排序/添加数据/查询数据/敏感字符过滤
- AngularJS添加删除查询排序
- AngularJS排序查询以及添加
- 2. AngularJs+JQuery:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息
- 3:AngularJS:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息
- AngularJS:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息
- 1. AngularJS+路由+JQuery:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息(路由显示添加页面)
- Angular用户查询,按条件排序,批量删除,添加,敏感字屏蔽
- 表格(查询数据 、 排序 、添加数据 、敏感词)
- 用户操作(添加、删除、敏感词、排序、查询)
- (angularjs) 数据的增查(添加用户,查询名字,实现排序,判断非空 ,是否是数字,是否重名,敏感字符)
- angularjs-添加数据,姓名查询,过滤敏感字符,下拉菜单查询
- 检测四边形(多边形)
- 非常有用的Java程序片段
- 抽象类和接口
- vue.js入门笔记 记录
- 内核级驱动对抗Hook ZwSetInformationFile反删除技术
- AngularJS+查询+敏感字+排序+添加
- Andriodjie——OKhttp拦截器
- hdu3709 枚举
- HTML表格
- 下载百度编辑器ueditor
- RecyclerView的使用
- 【深度相机系列二】深度相机原理揭秘--飞行时间(TOF)
- 为什么要进行内存对齐以及对齐规则
- 移动端使用PhotoSwipe 图片放大浏览