angular的敏感字,判断不为空,不重复运用_angular 不等于空代码示例-优快云博客

本文介绍了一个使用AngularJS实现的球员信息管理系统，该系统包括球员信息的添加、展示、排序及查询等功能。通过实际代码展示了AngularJS的数据绑定、指令、控制器等核心特性。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
th,td{
    width: 100px;
    height: 40px;
    border: 1px solid #000000;
}
     /* tr:hover{
          background: #69717d;
      }*/
        table{
            border-collapse: collapse;
            margin-top: 8px;
        }
        .wh{
           width: 20px;
            height: 20px;
        }
        .juli{
            margin-right: 40px;
        }
        .ys{
            background: #0a9dc7;
        }
    </style>
    <script src="angular-1.5.5/angular.min.js"></script>
    <script>
        /*声明模块*/
        var myapp=angular.module("myapp",[]);
        /*为模块加控制器*/
        myapp.controller("myCtrl",function ($scope) {
            /*创建数组*/
            $scope.items=[
                {
                    "name":"张三",
                    "wz":"大前锋",
                    "qh":11,
                    "page":555
                },
                {
                    "name":"李四",
                    "wz":"火箭队",
                    "qh":33,
                    "page":666
                },
                {
                    "name":"王五",
                    "wz":"冲冲冲队",
                    "qh":55,
                    "page":777
                },
                {
                    "name":"赵六",
                    "wz":"飞快队",
                    "qh":77,
                    "page":888
                },
             {
                 "name":"周七",
                 "wz":"滕武队",
                 "qh":99,
                 "page":999
             }
            ];
            /*排序*/
            $scope.pageSize="票数倒序";
            $scope.sort=function(){
                /*注意“”里汉字和<option><option>里相同*/
                    if($scope.pageSize=="票数倒序"){
                        $scope.revers=true;
                    }else if($scope.pageSize=="票数正序"){
                        $scope.revers=false;
                    }

            };
            /*添加新成员,不能重复，不能为空*/
         $scope.additem=function () {
            for(var i=0;i<$scope.items.length;i++){
                if($scope.name==$scope.items[i].name){
                    alert("不能重复");
                    return;
                }
                if($scope.name==null){
                    alert("不能为空");
                    return;
                }
            }
            /*写在循环外边*/
            $scope.items.push({"name":$scope.name,"wz":$scope.wz,"qh":$scope.qh,"page":$scope.page});
             /*隐藏*/
             $scope.xian=false;
         }
            /*显示隐藏*/
            $scope.xian=false;
            /*显示*/
            $scope.showall=function () {
                /*显示*/
                $scope.xian=true;
            }
            /*查询，敏感字*/
            /**/
            $scope.chazhao="";
            /**/
            $scope.chazhao2="";
            $scope.$watch("chazhao",function(value){
                if(value.indexOf("枪")!=-1){
                    alert("敏感字");
                    /**/
                    $scope.chazhao="";
                }else{
                    $scope.chazhao2=$scope.chazhao;
                }
            });
        })

    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
查询:
<input type="text" ng-model="chazhao">
排序:
<select ng-model="pageSize" ng-change="sort()">
    <option>票数倒序</option>
    <option>票数正序</option>
     </select><br>
<button ng-click="showall()" class="ys">新增球员</button><br>
<div ng-show="xian">
姓名:<input type="text" ng-model="name"><br>
位置:<input type="text" ng-model="wz"><br>
球号：<input type="text" ng-model="qh"><br>
票数：<input type="text" ng-model="page"><br>
     <button  ng-click="additem()">提交</button>
</div>
</table>
<table>
    <tr>
        <th ng-click="sort('name')">姓名</th>
        <th ng-click="sort('wz')">位置</th>
        <th ng-click="sort('qh')">球号</th>
        <th ng-click="sort('page')">票数</th>
    </tr>
<!--注意|filter:{name:chazhao2}中“chazhao2”-->
    <tr ng-repeat="item in items|filter:{name:chazhao2}|orderBy:'page':revers">
        <td>{{item.name}}</td>
        <td>{{item.wz}}</td>
        <td>{{item.qh}}</td>
        <td>{{item.page}}</td>
    </tr>
</table>
</body>
</html>