AngularJS表单的查询与增加

例子：

添加球员的功能无指定技术要求，添加球员的页面也无具体样式要求。

AngularJS表单的查询与增加

1.实现上图页面所有元素，页面布局规整加，跟上图效果一致

2.实现文案显示，按效果显示

3.实现查询，实现查询敏感词过滤，实现查询后列表变化

4.实现倒序，实现正序，下拉列表排序效果都实现

5.按钮背景一致，按钮样式

6.实现添加球员页面，添加球员页面样式，添加球员功能，添加球员必填项判断，添加完球员后能显示在表格内，已存在球员判重。

7.表格样式跟上图样式一致。

源码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="angular-1.3.0.js" ></script>
    <script type="text/javascript" src="angular-route.js" ></script>
    <style>
        .addUser{
            width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3;
            float: left;
        }
        center{
            width: 500px;
            margin: auto;
        }
        table{
            width: 500px;

        }
        .select{
            width: 200px;
            height: 20px;
        }
        select{
            width: 220px;
            height: 25px;
        }
        .xx1{
            float: left;
        }
        .xx2{
            float: right;
        }

        #tb th{
            background: #aaa;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            odd= {"background":"#ddd"};//奇数样式
            even={"background":"#fff"};//偶数样式
            odd_even("#table_test",odd,even);
        });
        function odd_even(id,odd,even){
            $(" #tb").find("tr").each(function(index,element){
                if(index%2==1)
                    $(this).css(odd);
                else
                    $(this).css(even);
            });
        }
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            $scope.users = [
                {name:"张三",wz:"控球后卫",num:11,ticket:999},
                {name:"李四",wz:"大前锋",num:21,ticket:888},
                {name:"王五",wz:"小前锋",num:23,ticket:890},
                {name:"赵六",wz:"中锋",num:10,ticket:666},
                {name:"周七",wz:"得分后卫",num:1,ticket:555},

            ];


            $scope.addUser = function () {
                $scope.addUserIsShow = true;
            };
            $scope.sub = function() {

                var flag = true;
                var flag1 = true;
                for (var i in $scope.users) {

                    if ($scope.users[i].name == $scope.name) {
                        flag = false;
                    }

                }
                for (var i in $scope.users) {
                    if ("胡锦涛" == $scope.name) {
                        flag1 = false;
                    }
                }
                if (flag) {
                    if (flag1) {
                        if ($scope.name == "") {

                            alert("用户名不能为空");
                        } else {

                            var newUser = {
                                name: $scope.name,
                                wz: $scope.wz,
                                num: $scope.num,
                                ticket: $scope.ticket
                            }
                            //添加新用户.
                            $scope.users.push(newUser);
                            $scope.name = "";
                            $scope.password = "";
                            $scope.age = "";
                            $scope.sex = "";
                            $scope.addUserIsShow = false;
                        }
                    } else {
                        alert("出现敏感字符！");
                    }
                } else {
                    alert("该用户重复")
                }

            }
            $scope.order = function () {
                if ($scope.search_piao_shu_value == 1) {
                    $scope.users.sort(function (json1, json2) {
                        return (json1.ticket > json2.ticket) ? 1 : -1;
                    });
                } else if ($scope.search_piao_shu_value == 2) {
                    $scope.users.sort(function (json1, json2) {
                        return (json1.ticket < json2.ticket) ? 1 : -1;
                    });
                }
            };
           
        });

    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
    <div>
        <div class="xx1">
            <p style="text-align: left">查询</p>
            <input ng-model="search" placeholder="用户名查询" class="select" />
        </div>
        <div class="xx2">
            <p style="text-align: left">排序</p>
            <select ng-model="search_piao_shu_value" ng-change="order()">
                <option value="">排序</option>
                <option value="1">票数正序</option>
                <option value="2">票数倒序</option>
            </select>
        </div>
    </div><br />

    <div>

        <table border="1" cellspacing="0" cellpadding="10" id="tb">
            <tr>
                <th>姓名</th>
                <th>位置</th>
                <th>球号</th>
                <th>票数</th>
            </tr>
            </thead>
            <tbody>

            <tr ng-repeat="user in users | filter:{'name':search}| orderBy: ticket">
                <td>{{user.name}}</td>
                <td>{{user.wz}}</td>
                <td>{{user.num}}</td>
                <td>{{user.ticket}}</td>
            </tr>
            </tbody>
        </table>
    </div><br />
    <button ng-click="addUser()" class="addUser">新增球员</button><br /><br />
    <div ng-show="addUserIsShow">
        <form action="">
            <table border="1" cellspacing="0" cellpadding="10">
                <tr>
                    <th>姓名：</th>
                    <td><input ng-model="name" type="text" required placeholder="请输入姓名"/></td>
                </tr>
                <tr>
                    <th>位置：</th>
                    <td><input ng-model="wz" placeholder="请输入位置" /></td>
                </tr><tr>
                <th>球号：</th>
                <td><input ng-model="num" placeholder="请输入球号" /></td>
            </tr><tr>
                <th>票数：</th>
                <td><input ng-model="ticket" placeholder="请输入票数" /></td>
            </tr>
                <tr align="center">
                    <td colspan="2"><input type="button" ng-click="sub()" value="提交" /></td>
                </tr>
            </table>
        </form>
    </div>
</center>
</body>
</html>

AngularJS表单的查询与增加

相关推荐