添加用户+非空判断+整数判断+敏感字符过滤+排序+奇数行变颜色

来源：互联网发布：gif动态图软件编辑：程序博客网时间：2024/05/16 18:08
<!DOCTYPE html><html lang="en" ng-app="myapp"><head>    <meta charset="UTF-8">    <title>模拟题</title>    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">    <script src="angular-1.3.0.js"></script>    <script src="jquery.1.12.4.js"></script>    <style type="text/css">        .even_cls {            background-color: #fff;        }        .odd_cls {            background-color: #999;        }    </style>    <script>        var app=angular.module("myapp",[]);        app.controller("myctrl",function ($scope) {            $scope.data = [                {                    name: "张三",                    password: "控球后卫",                    age: 11,                    sex: 999                },                {                    name: "李四",                    password: "大前锋",                    age: 21,                    sex: 888                },                {                    name: "王五",                    password: "小前锋",                    age: 23,                    sex: 777                },                {                    name: "赵六",                    password: "中锋",                    age: 10,                    sex: 666                },                {                    name: "周七",                    password: "得分后卫",                    age: 1,                    sex: 555                }            ];            //=================================================================================            //单击进行添加            $scope.add = function () {                if($scope.name ==""||$scope.name ==undefined||                    $scope.password==""||$scope.password==undefined||                    $scope.age==""||$scope.age==undefined||                    $scope.sex==""||$scope.sex==undefined                ){                    alert("请填写未填写项");                    return;                }                if (!/^\d+$/.test($scope.age)) {                    alert("球号必须是整数！");                    return;                }                if (!/^\d+$/.test($scope.sex)) {                    alert("票数必须是整数！");                    return;                }                $scope.data.push(                    {                        name: $scope.name,                        password: $scope.password,                        age: $scope.age,                        sex: $scope.sex                    }                );                $scope.name = "";                $scope.password = "";                $scope.age = "";                $scope.sex = "";                $scope.show = false;            };            //单击添加时 就显示框            $scope.tian=function () {                $scope.show=true;            };                        //排序            $scope.order = function () {                if ($scope.search_piao_shu_value == 1) {                    $scope.data.sort(function (json1, json2) {                        return (json1.sex > json2.sex) ? 1 : -1;                    });                } else if ($scope.search_piao_shu_value == 2) {                    $scope.data.sort(function (json1, json2) {                        return (json1.sex < json2.sex) ? 1 : -1;                    });                }            };        })        //        app.filter("mgc", function () {            return function (msg, flag) {                return msg.replace(flag, "***");            };        });    </script></head><body ng-controller="myctrl"><div>    查询    <input type="text" ng-model="gen" placeholder="姓名查询" />    排序    <!--<select ng-model="pai">-->        <!--<option>票数倒序</option>-->        <!--<option>票数正序</option>-->    <!--</select>-->    <select ng-model="search_piao_shu_value" ng-change="order()">        <option value="1">票数正序</option>        <option value="2">票数倒序</option>        </select><br/>        </div>        <br>        <button ng-click="tian()" style="width: 150px; height: 40px; background-color: deepskyblue; " >新增球员</button>        <br><br>        <table border="1" style="width: 400px">            <tr style="background-color: #666">                <td>姓名</td>                <td>位置</td>                <td>球号</td>                <td>票数</td>            </tr>            <tr ng-repeat="user in data| filter:{name:gen}" ng-class="{even_cls: !$even, odd_cls: !$odd}">                <td>{{user.name| mgc: '习近平'}}</td>                <td>{{user.password}}</td>                <td>{{user.age}}</td>                <td>{{user.sex}}</td>            </tr>        </table>        <div ng-show="show">            <table border="1">                <tr>                    <td>姓名：</td>                    <td><input type="text" ng-model="name"></td>                </tr>                <tr>                    <td>位置：</td>                    <td><input type="text" ng-model="password"></td>                </tr>                <tr>                    <td>球号：</td>                    <td><input type="text" ng-model="age"></td>                </tr>                <tr>                    <td>票数：</td>                    <td><input type="text" ng-model="sex"></td>                </tr>                <tr>                    <td colspan="2" align="center">                        <button ng-click="add()">提交</button>                    </td>                </tr>            </table>        </div>        </body>        </html>
阅读全文
0 0