html angular+route:模糊查询+下拉排序+新增内容+判断是否重复+输入敏感字提示

本文链接：https://blog.csdn.net/qq_40143811/article/details/78319753

<!DOCTYPE html>
<html lang="en">

   <head>
       <meta charset="UTF-8">
       <title>第三周</title>
       <style type="text/css">
           tr {
               background: #D4D4D4;
           }

           tr:nth-child(2n) {
               background: #FFFFFF;
           }

           tr {
               background-color: expression((this.sectionRowIndex % 2==0) ? "#FF3": "#6F9");
           }
       </style>
       <script type="text/javascript" src="js/angular.js"></script>
       <script type="text/javascript" src="js/angular-route.js"></script>
       <script>
           //定义表格内容
           var app = angular.module("myApp", ['ngRoute']);
           //使用config配置路由规则
           app.config(["$routeProvider", function($routeProvider) {
               $routeProvider
                   .when("/addUser", {
                       controller: "addUserCtrl",
                       templateUrl: "addUser.html"
                   })
           }]);

           //自定义过滤器
           app.filter("myFilter", function() {
               return function(text) {
                   //alert("fasd");
                   if(text.indexOf("敏感字符") >= 0) {
                       //alert("asdfasdf");
                       alert("包含敏感字符")
                       return text.replace(/敏感字符/g, "***");
                   }
                   return text;
               }
           });

           app.controller("myCtrl", function($scope, $location) {
               //定义表格内容
               $scope.desc = 1; //默认排序条件升序
               $scope.gen = "";
               $scope.users = [{
                       name: "张三",
                       pwd: "控球后卫",
                       age: "11",
                       sex: 999,
                   },
                   {
                       name: "李四",
                       pwd: "大前锋",
                       age: "21",
                       sex: 888,
                   },
                   {
                       name: "王五",
                       pwd: "小前锋",
                       age: "23",
                       sex: 777,
                   },
                   {
                       name: "赵六",
                       pwd: "中锋",
                       age: "10",
                       sex: 666,
                   },
                   {
                       name: "周七",
                       pwd: "得分后卫",
                       age: "1",
                       sex: 555,
                   }
               ];

               //定义跳转方法
               //定义页面跳转方法
               $scope.goToUrl = function(path) {
                   //                   alert(path);
                   $location.path(path);
               }

           });

           //添加用户控制器
           //定义添加用户控制器
           app.controller("addUserCtrl", function($scope) {
               $scope.name = "";
               $scope.pwd = "";
               $scope.age = "";
               $scope.sex = "";

               var f = true;
               $scope.sub = function() {
                   if($scope.name == "") {
                       alert("姓名不能为空");
                   } else {
                       for(user in $scope.users) {
                           if($scope.users[user].name == $scope.name) {
                               alert("已经存在");
                               f = false;
                               break;
                           }
                       }
                       if(f) {
                           alert($scope.name);
                           $scope.users.push({
                               name: $scope.name,
                               pwd: $scope.pwd,
                               age: $scope.age,
                               sex: $scope.sex * 1,
                           });
                       }
                   }
               }
           });
       </script>
   </head>

   <body ng-app="myApp" ng-controller="myCtrl">
       <div>
           <span style="margin-right: 150px;">查询</span><span>排序</span><br />
           <input id="cx" type="text" placeholder="姓名查询" style="width: 130px;margin-right: 40px;" ng-model="gen">
           <select style="width: 130px;">
               <option selected="selected" ng-click="desc!=1">票数倒序</option>
               <option ng-click="desc=0">票数正序</option>
           </select>
       </div>
       <br><br>
       <button class="addUser" ng-click="goToUrl('/addUser')" style="background-color:deepskyblue;width: 100px;height: 50px;">新增球员</button><br /><br />
       <br>
       <div>
           <table border="1" cellspacing="0" cellpadding="1" width="300px">
               <thead>
                   <tr style="background-color: gray;">
                       <th>姓名</th>
                       <th>位置</th>
                       <th>球号</th>
                       <th>票数</th>
                   </tr>
               </thead>
               <tbody>
                   <tr ng-repeat="user in users | filter:{name:gen} | orderBy:'sex':desc">
                       <td>{{user.name | myFilter }}</td>
                       <td>{{user.pwd}}</td>
                       <td>{{user.age}}</td>
                       <td>{{user.sex}}</td>
                   </tr>
               </tbody>

           </table>
       </div>
       
       <script type="text/ng-template" id="addUser.html">
           <form action="">
               <table border="1" cellspacing="1" cellpadding="10" style="">
                   <tr>
                       <th>姓名：</th>
                       <td><input ng-model="name" placeholder="请输入姓名" /></td>
                   </tr>
                   <tr>
                       <th>位置：</th>
                       <td><input ng-model="pwd" placeholder="请输入位置" /></td>
                   </tr>
                   <tr>
                       <th>球号：</th>
                       <td><input ng-model="age" placeholder="请输入球号" /></td>
                   </tr>
                   <tr>
                       <th>票数：</th>
                       <td><input type="number" ng-model="sex" placeholder="请输入票数" /></td>
                   </tr>
                   <tr align="center">
                       <td colspan="2"><input type="button" ng-click="sub()" value="提交" /></td>
                   </tr>
               </table>
           </form>
       </script>
       <div ng-view="">
       </div>
   </body>

</html>