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

最新推荐文章于 2018-09-11 16:10:00 发布

SXS120730

最新推荐文章于 2018-09-11 16:10:00 发布

阅读量364

点赞数

分类专栏： Angularjs

本文链接：https://blog.csdn.net/SXS120730/article/details/78322930

版权

Angularjs 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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

SXS120730

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs的过滤，添加，相同名字的验证

Title var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function ($scope) { $scope.users=[ { 'name':"张三", 'wz':"控球后卫（SG）", "qh":11, "pa
复制链接

扫一扫