html5_angular表操作_html5 引入angular-优快云博客

本文链接：https://blog.youkuaiyun.com/Android___vv/article/details/78317844

<!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>