AngularJS+查询+敏感字+排序+添加

来源：互联网发布：中学美工课教案编辑：程序博客网时间：2024/05/19 17:48
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>球队</title>    <style>        *{            margin: 0 auto;        }        .box{            width: 800px;            height: 700px;            padding-top: 20px;        }        .left{            float: left;            width: 350px;            height: 100px;        }        .right{            float: right;            width: 350px;            height: 100px;        }        .bottom{            width: 750px;            height: 500px;            float: left;        }        .bottom button{            width: 180px;            height: 40px;            background: deepskyblue;            font-size: 20px;        }        .box2{            width: 300px;            height: 100px;        }    </style>    <script src="angular-1.5.5/angular.min.js"></script>    <script>        var app = angular.module("myapp",[]);        app.controller("mycont",function ($scope) {            //初始化球员数据            $scope.data = [{                name:"张三",                wz:"控球后卫",                qh:"11",                ps:999            },{                name:"李四",                wz:"大前锋",                qh:"21",                ps:888            },{                name:"王五",                wz:"小前锋",                qh:"23",                ps:777            },{                name:"赵六",                wz:"中锋",                qh:"10",                ps:666            },{                name:"李敏",                wz:"得分后卫",                qh:"1",                ps:555            }];            //添加球员            $scope.show = false;            $scope.add = function () {                $scope.show = true;            }            $scope.adds = function () {                //判断信息是否完整                if ($scope.name != null&&$scope.wz != null&&$scope.qh != null){                    for (var i=0;i<$scope.data.length;i++){                        //判断球员是否存在                        if ($scope.data[i].name == $scope.name){                            alert("球员已存在！！！");                            return;                        }                    }                    $scope.data.push({name:$scope.name, wz:$scope.wz, qh:$scope.qh, ps:1});                } else {                    alert("请填入球员完整信息！！！");                    return;                }                //初始化、隐藏添加框                $scope.name="";                $scope.wz="";                $scope.qh="";                $scope.show = false;            }            //过滤敏感字            $scope.search = "";            $scope.search2 = "";            $scope.$watch("search",function (value) {                if (value.indexOf("#")!=-1) {                    alert("敏感字");                } else {                    $scope.search2 = $scope.search;                }            })            /*//排序            $scope.order = "票数排序";            $scope.fun=function(){                if($scope.sort!="--请选择--"){                    if($scope.sort=="倒序"){                        $scope.revers=true;                    }else if($scope.sort=="正序"){                        $scope.revers=false;                    }                }            };*/        })    </script></head><body ng-app="myapp" ng-controller="mycont">    <div class="box">        <!--查询表-->        <div class="left">            <h4>查询</h4>            <input type="text" ng-model="search" style="width: 300px; height: 30px">        </div>        <!--p排序表-->        <div class="right">            <h4>排序</h4>            <select style="width: 300px; height: 36px" ng-model="order"><!--ng-change="fun()"-->                <option>票数排序</option>                <option value="-ps">倒序</option>                <option value="ps">正序</option>            </select>        </div>        <div class="bottom">            <button ng-click="add()">新增球员</button>            <br/><br/><br/>            <!--球员信息表-->            <table border="soild 1px #000" cellspacing="0" width="100%" style="height: 300px">                <thead style="background: #999999">                <tr>                    <td>姓名</td>                    <td>位置</td>                    <td>球号</td>                    <td>票数</td>                </tr>                </thead>                <tbody>                <tr ng-repeat="item in data|filter:search2|orderBy:order"><!--|filter:{name:search}--><!--orderBy:'ps':revers-->                    <td>{{item.name}}</td>                    <td>{{item.wz}}</td>                    <td>{{item.qh}}</td>                    <td>{{item.ps}}</td>                </tr>                </tbody>            </table>        </div>    </div>    <!--添加球员信息框-->    <div ng-show="show" class="box2">        姓名:<input type="text" ng-model="name"><br>        位置:<input type="text" ng-model="wz"><br>        球号:<input type="text" ng-model="qh"><br>        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        <button ng-click="adds()">完成</button>    </div></body></html>
阅读全文
1 0