AngularJs的过滤，添加，相同名字的验证

来源：互联网发布：人工智能带来的便利编辑：程序博客网时间：2024/06/09 17:33
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="angular-1.5.5/angular.js"></script>    <script>       var myapp=angular.module("myapp",[]);       myapp.controller("myCtrl",function ($scope) {           $scope.users=[               { 'name':"张三", 'wz':"控球后卫（SG）", "qh":11,  "page":777},               {'name':"李四",'wz':"大前锋（PF）", "qh":21,  "page":888},               {'name':"王五",'wz':"小前锋（SG）", "qh":23, "page":999},               { 'name':"赵六", 'wz':"中锋（SG）", "qh":10,  "page":666},               {'name':"周七", 'wz':"得分后卫（SG）", "qh":1, "page":555}           ];        //进行排序           $scope.page="票数排序（正序）";           $scope.has=false;         $scope.pagefilter=function (item) {             $scope.nn= $scope.page;            if(  $scope.nn=="票数排序（正序）"){                $scope.has=false;                return item.page;            }else if($scope.nn=="票数排序（倒序）"){                $scope.has=true;                return item.page;            }         }         //实现添加的功能           $scope.pp=false;           $scope.add=function () {               $scope.pp=true;            if($scope.pp==true){                $scope.sub=function () {                    $scope.ss={'name':$scope.names, 'wz':$scope.wz, "qh":$scope.qd,  "page":$scope.pages};                    for(var i=0;i<$scope.users.length;i++){                        if($scope.users[i].name==$scope.ss.name){                         /* $scope.  users.unshift( $scope.ss);*/                         alert("该球员已存在")                            break;                        }else                            if(i==$scope.users.length-1){                            $scope.users.unshift( $scope.ss);                            break;                        }                    }                }            }           }           //敏感字体的过滤           $scope.name="";//输入的内容           $scope.namew="";           $scope.$watch("name",function (value) {                   if(value.indexOf("枪")!=-1){                   alert("包含敏感字符")                   $scope.name="";               }else{                   $scope.namew= $scope.name;               }           })       });     /*  //敏感字体的过滤       myapp.filter("www",function () {           return function (msg) {               return msg.replace(/[枪法轮暴力色情传销]/g,function (word) {                   var cc="";                   for(var i=0;i<word.length;i++){                       cc+="*";                   }                   return  cc;               })           }       });*/    </script>    <style>        body{            width: 1000px;            height: 1000px;        }        div{            width: 500px;            height: 1000px;            margin: 0 auto;        }        .tab tr td{            width: 400px;            height:80px;        }        button{            background: blue;        }       .table tr td {             width: 200px;             height:20px;            border-left: 1px solid black;         }       .table {           border: 1px solid black;       }        .table tr th {            width: 200px;            height:20px;            border-left: 1px solid black;        }        .table tr:nth-child(odd){background:#B1B1B1;}        .table tr:nth-child(even){background:white;}    </style></head><body ng-app="myapp" ng-controller="myCtrl"><div>    <table class="tab">        <tr>            <td>                <p>查询</p>                <input type="text" ng-model="name"/>            </td>            <td>                <p>排序</p>                <select ng-model="page" ng-click="bb()">                    <option  >票数排序（正序）</option>                    <option>票数排序（倒序）</option>                </select>            </td>        </tr>        <tr>            <td><button ng-click="add()">新增新球员</button></td>        </tr>    </table>    <table class="table">        <tr>            <th>姓名</th>            <th>位置</th>            <th>球号</th>            <th>票数</th>        </tr>        <tr ng-repeat="item in users|filter:namew|orderBy:pagefilter:has">            <td>{{item.name}}</td>            <td>{{item.wz}}</td>            <td>{{item.qh}}</td>            <td>{{item.page}}</td>        </tr>    </table>    <table ng-show="pp">        <tr>            <td>                姓名：<input type="text" ng-model="names"/>            </td>        </tr>        <tr>            <td>                位置：<input type="text" ng-model="wz"/>            </td>        </tr>        <tr>            <td>               球队：<input type="text" ng-model="qd"/>            </td>        </tr>        <tr>            <td>                票数：<input type="text" ng-model="pages"/>            </td>        </tr>        <tr>            <td><button ng-click="sub()">提交</button></td>        </tr>    </table></div></body></html>
阅读全文
0 0