添加,查询,排序

来源：互联网发布：英雄联盟 mac 国服编辑：程序博客网时间：2024/05/17 23:17
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script type="text/javascript" src="angular-1.3.0.js"></script>    <script type="text/javascript" src="jquery.1.12.4.js"></script>    <script>        var app = angular.module("myapp",[]);        app.controller("myctrl",function($scope){            $scope.h=false;            $scope.persons=[];            $scope.xz = function(){                $scope.h=true;            }            $scope.tj = function(){                for(var i=0;i<$scope.persons.length;i++){                    if($scope.name==$scope.persons[i].name){                        alert("您记录的内容已存在");                        return;                    }                }                if($scope.name!=""&&$scope.name!=null){                    if($scope.wz!=""&&$scope.wz!=null){                        if($scope.hao!=""&&$scope.hao!=null){                            if($scope.number!=""&&$scope.number!=null){                                $scope.persons.push({name:$scope.name,wz:$scope.wz,hao:$scope.hao,number:$scope.number});                                $scope.name="";                                $scope.wz="";                                $scope.hao="";                                $scope.number="";                                $scope.h=false;                            }else{                                alert("票数不能为空");                            }                        } else{                            alert("球号不能为空");                        }                    }else{                        alert("位置不能为空");                    }                }else{                    alert("姓名不能为空");                }            }        });    </script>    <style>        .input{            width: 300px;            height: 30px;        }        .select{            width: 300px;            height: 35px;        }        .button{            background-color: deepskyblue;            width: 100px;            height: 60px;            border-radius: 5%;            margin-top: 30px;        }        .table{            margin-top: 30px;        }        .table tr:nth-child(even){            background-color: #EEEEEE;        }        .table2{            position: absolute;            left: 300px;            top: 650px;        }        .q{            text-align: center;        }    </style></head><body ng-app="myapp" ng-controller="myctrl"><div>    查询<br>    <input type="text" class="input" ng-model="names"></div><div style="position: absolute;top: 10px; left: 500px">    排序<br>    <select class="select" ng-model="b">        <option value="">票数正序</option>        <option value="-">票数倒序</option>    </select></div><button class="button" ng-click="xz()">新增球员</button><table border="1" width="60%" cellspacing="0" cellpadding="10" class="table">    <tr style="background-color: #999999">        <th>姓名</th>        <th>位置</th>        <th>球号</th>        <th>票数</th>    </tr>    <tr ng-repeat="person in persons | filter:{'name':names} |orderBy:b+'number'">        <td class="q">{{person.name}}</td>        <td class="q">{{person.wz}}</td>        <td class="q">{{person.hao}}</td>        <td class="q">{{person.number}}</td>    </tr></table><table border="1" cellspacing="0" cellpadding="10" class="table2" ng-show="h">    <tr>        <td>姓名</td>        <td><input type="text" placeholder="请输入姓名" ng-model="name"></td>    </tr>    <tr>        <td>位置</td>        <td><input type="text" placeholder="请输入位置" ng-model="wz"></td>    </tr>    <tr>        <td>球号</td>        <td><input type="number" placeholder="请输入球号" ng-model="hao"></td>    </tr>    <tr>        <td>票数</td>        <td><input type="number" placeholder="请输入票数" ng-model="number"></td>    </tr>    <tr>        <td colspan="2" align="center"><input type="button" value="提交" ng-click="tj()"></td>    </tr></table></body></html>
阅读全文
0 0