AngularJS表单的查询与增加

向右看齐 2022-06-07 13:57 156阅读 0赞

**例子：**

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

![Center][]

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>

[Center]: /images/20220607/9a569205a5d645da829a4ae0efe450eb.png