angularJS实现查询/选择排序/添加/敏感字符过滤

来源：互联网发布：c语言刷题网站编辑：程序博客网时间：2024/04/17 05:39
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>weicy</title>    <script src="angular.js"></script>    <style>       #tj{            background-color: #0c60ee;       }    </style>    <script>        var app = angular.module("myApp",[]);        app.controller("myCtrl",function ($scope) {            $scope.users = [{                name:"张三",                wz:"123",                qh:11,                ps:999            },{                name:"李四",                wz:"456",                qh:21,                ps:888            },{                name:"王五",                wz:"789",                qh:23,                ps:777            },{                name:"赵六",                wz:"1122",                qh:10,                ps:666            },{                name:"田七",                wz:"3344",                qh:1,                ps:555            }];            //设置添加用户类表的显示隐藏            $scope.toggle = function() {                $scope.myVar = !$scope.myVar;            }            //添加用户            $scope.tianjia = function (tjname,tjwz,tjqh,tjps) {                var flag = true;                if (tjname=="" || tjname == null){                    alert("添加名称必填项")                }else {                    for (i in $scope.users){                        if ($scope.users[i].name == tjname){                            alert("用户已存在");                            flag = false;                        }                    }                    if (flag){                        $scope.users.push({                            name:tjname,                            wz:tjwz,                            qh:tjqh,                            ps:tjps,                        });                    }                }            }            //选择排序方式            $scope.size1 = "--请选择--";            $scope.sexSize = function(qh,size1){                if(size1 == "--请选择--"){                    return true;                }else{                }            }            //敏感字符过滤            $scope.yhm="";            $scope.search2="";            $scope.$watch("yhm",function(value){                console.log(value);                if(value.indexOf("枪")!=-1){                    alert("包含敏感字");                    $scope.yhm="";                }else{                    $scope.search2=$scope.yhm;                }            });        })    </script></head><body ng-app="myApp" ng-controller="myCtrl">   <center>       <table border="0" width="600px">            <tr>                <td>查询</td>                <td></td>                <td>排序</td>            </tr>           <tr>               <td colspan="2">                   <input type="text"  placeholder="姓名查询" ng-model="yhm">               </td>               <td colspan="2">                   <select ng-model="order">                       <option value="">--请选择排序顺序--</option>                       <option value="ps">正序</option>                       <option value="-ps">倒序</option>                   </select>               </td>           </tr>           <tr>               <td></td>           </tr>           <tr>               <td></td>           </tr>           <tr>               <td colspan="4">                   <button id="tj" ng-click="toggle()">新加人员</button>               </td>           </tr>           <tr>               <td></td>           </tr>           <tr>               <td></td>           </tr>       </table>       <table  border="1" width="600px" cellpadding="10" cellspacing="0">           <tr>               <th>姓名</th>               <th>密码</th>               <th>卡号</th>               <th>卡数</th>           </tr>           <tr ng-repeat="user in users | filter:{name:search2} | orderBy: order" ng-show="sexSize(user.ps,size1)">               <td>{{user.name}}</td>               <td>{{user.wz}}</td>               <td>{{user.qh}}</td>               <td>{{user.ps}}</td>           </tr>       </table><br><br>       <table ng-if="myVar"  border="1 solid blue" cellpadding="10" cellspacing="0">           <tr>               <th>姓名</th>               <td><input type="text" ng-model="tjname"></td>           </tr>           <tr>               <th>位置</th>               <td><input type="text" ng-model="tjwz"></td>           </tr>           <tr>               <th>卡号</th>               <td><input type="text" ng-model="tjqh"></td>           </tr>           <tr>               <th>卡数</th>               <td><input type="text" ng-model="tjps"></td>           </tr>           <tr>               <td colspan="2" align="center">                   <button ng-click="tianjia(tjname,tjwz,tjqh,tjps)">添加</button>               </td>           </tr>       </table>   </center></body></html>
阅读全文
0 0