3：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>

3：AngularJS：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息相关推荐

Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中
功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择 1.建立一aspx页面,html代码 <HTML> <HEAD> < ...
powerbuilder提示不是下拉窗口_制作简易工资查询模板，下拉菜单选择姓名即可显示...
[温馨提示]亲爱的朋友,阅读之前请您点击[关注],您的支持将是我最大的动力! 以前小编分享过多种工资表变工资条的方法,不知道小伙伴们都看过没有. 今天分享一个简单的工资查询模板,生成一个人的工资条,通 ...
excel下拉菜单自动匹配_自动将新项目添加到Excel数据验证下拉菜单
excel下拉菜单自动匹配 There's a sample Excel workbook on my Contextures website that uses a bit of Excel VBA ...
智能补全模糊查询select2的下拉选择框使用
我们在上篇文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架,在此基础上记录select2的使用. 应用bootstrap模板基础项目源码下载地址为: SpringMV ...
前端实现js模糊查询关键字显示下拉框功能的实例教程
所谓模糊查询就是通过关键字在数据中匹配到包含关键字的数据,而得出的查询结果.本实例教程讲解在前端文本框输入关键字,显示匹配的数据列表功能. 首先得准备一个文本框和显示数据列表的div元素,html代码 ...
java下拉模糊查询_select2 智能补全模糊查询select2的下拉选择框使用
我们在上篇文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架,在此基础上记录select2的使用. 应用bootstrap模板基础项目源码下载地址为: SpringMV ...
Excel多级下拉菜单联动自动匹配内容
实现效果: 如,点击"市"下方的下拉菜单,有"成都.北京.杭州.上海"四个选项,选择杭州以后,在"区"下方单元格的就会相应的出现杭州的区. ...
excel添加列下拉框票价_excel表格下拉表格添加数据-excel2017表格中怎么制作下拉菜单列表框...
在Excel表中,如何将增加下拉菜单的选项? excel中的下拉菜单选项,就是筛选的功能,具体操作如下: 1.首先选中a.b两列数据,在"开始"选项卡上选择"筛选&quo ...
关于Excel中，下拉菜单的制作。
规定下拉菜单中的数据(Excel 2003 [数据]--- [有效性L] ). 在日文下,是[入力規則L] 第一步 1首先在Excel中,找一个位置,写出你的下拉菜单中,要使用的数据. 第二步 2然后 ...
dropdownlist三级联动怎么实现_简单三步，轻松搞定一级、二级、三级下拉菜单
工作中,为了录入数据方便,数据规范,我们经常采用下拉菜单来制作规范模板,今天,技巧君和大家分享一下一级.二级和三级联动下拉菜单制作方法,文末有示例文件下载方法哦! 下拉菜单示例一级下拉菜单一级下拉 ...

3：AngularJS：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息

3：AngularJS：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息相关推荐

最新文章

热门文章