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

最新推荐文章于 2022-07-05 10:28:28 发布

By_Weicy

最新推荐文章于 2022-07-05 10:28:28 发布

阅读量410

点赞数

CC 4.0 BY-SA版权

文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/weikai_/article/details/78319174

安卓基础/混合开发专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的简单应用程序案例，该程序包括用户数据展示、查询、添加及排序等功能，并通过AngularJS内置指令实现了数据绑定和DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>