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 相关文章推荐
Javascript与flash交互通信基础教程
Aug 07 Javascript
JavaScript iframe的相互操作浅析
Oct 14 Javascript
浅析Prototype的模板类 Template
Dec 07 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
jquery的live使用注意事项
Feb 18 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 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
基于mysql的论坛(1)
2006/10/09 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
jQuery操作事件完整实例分析
2020/01/10 jQuery
es6数组includes()用法实例分析
2020/04/18 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
Python下singleton模式的实现方法
2014/07/16 Python
python去除字符串中的换行符
2017/10/11 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
django认证系统 Authentication使用详解
2019/07/22 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
python入门教程之基本算术运算符
2020/11/13 Python
python性能测试工具locust的使用
2020/12/28 Python
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
护士实习求职信
2014/06/22 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
vue实现移动端div拖动效果
2022/03/03 Vue.js