AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)


Posted in Javascript onOctober 24, 2017

AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)

注:添加球员的功能无指定技术要求,添加球员的页面也无具体样式要求。   

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模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
转一个日期输入控件,支持FF
Apr 27 Javascript
JQuery 学习笔记 选择器之四
Jul 23 Javascript
node.js中的favicon.ico请求问题处理
Dec 15 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 Javascript
基于js中this和event 的区别(详解)
Oct 24 #Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 #Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 #jQuery
通俗易懂地解释JS中的闭包
Oct 23 #Javascript
AngularJS 教程及实例代码
Oct 23 #Javascript
浅谈Koa服务限流方法实践
Oct 23 #Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 #Javascript
You might like
php实现下载限制速度示例分享
2014/02/13 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
session 加入redis的实现代码
2016/07/15 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
python避免死锁方法实例分析
2015/06/04 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
局域网标准
2016/09/10 面试题
主要的Ajax框架都有什么
2013/11/14 面试题
Java面向对象面试题
2016/12/26 面试题
2014全国两会大学生学习心得体会
2014/03/10 职场文书
学习两会精神心得范文
2014/03/17 职场文书
岗位廉政承诺书
2014/03/27 职场文书
表彰大会策划方案
2014/05/13 职场文书
商铺消防安全责任书
2014/07/29 职场文书
大学生毕业评语
2014/12/31 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书