zhou3

来源：互联网发布：特效软件下载编辑：程序博客网时间：2024/06/05 10:01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table{
            border-collapse: collapse;
        }
        th{
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid black;
            background: gray;
        }
        td{
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid black;
        }
        .font{
            background: red;
        }
    </style>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
            $scope.showAdd=false;
            $scope.key_name="";
            $scope.key_weizhi="";
            $scope.key_num="";
            $scope.key_count="";
            $scope.items=[
                { name:'张三',weizhi:'控球后卫',num:11,count:999},
                { name:'李四',weizhi:'大前锋',num:21,count:888},
                { name:'王五',weizhi:'小前锋',num:23,count:777},
                { name:'赵六',weizhi:'中锋',num:10,count:666},
                { name:'周七',weizhi:'得分后卫',num:1,count:555}
            ];

            $scope.add=function () {
                $scope.showAdd=true;
            }
            //添加
            $scope.yes=function (name,weizhi,num,count) {

                    if($scope.key_name==""||$scope.key_weizhi==""||$scope.key_num==""||$scope.key_count==""){
                        alert("不能为空");
                    }else{
                        for(var i=0;i<$scope.items.length;i++){
                            if($scope.key_name==$scope.items[i].name){
                                alert("以存在");
                                $scope.key_name="";
                                $scope.key_weizhi="";
                                $scope.key_num="";
                                $scope.key_count=""
                                return;
                            }
                    }
                }

$scope.items.push({
name:name,weizhi:weizhi,num:num,count:count

                });
                $scope.key_name="";
                $scope.key_weizhi="";
                $scope.key_num="";
                $scope.key_count=""
                $scope.showAdd=false;

            }
            $scope.sort="--请选择--";
            $scope.fun=function () {
             if($scope.sort!="--请选择--"){
                 if($scope.sort=="票数倒序"){
                     $scope.revers=true;
                 }else if($scope.sort=="票数正序"){
                     $scope.revers=false;
                 }
             }
            }

//            $scope.mysort='name';
//
//            $scope.sort=function (column) {
//                if($scope.mysort=column){
//                    $scope.server=!$scope.server;
//                }
//                $scope.mysort=column;
//            };
//            $scope.red=function (mysort) {
//                if($scope.mysort==mysort){
//                    return "font";
//                }
//            }
        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
查询<input type="text" ng-model="search">
排序<select ng-model="sort" ng-change="fun()">
    <option>--请选择--</option>
    <option>票数倒序</option>
    <option>票数正序</option>
</select>
<br>
<button ng-click="add()" style="background: skyblue;width: 100px;height: 30px;line-height: 30px;text-align: center">新增球员</button>
<div ng-show="showAdd">
    <input type="text" ng-model="key_name"placeholder="请输入姓名">
    <input type="text" ng-model="key_weizhi"placeholder="请输入位置">
    <input type="text" ng-model="key_num"placeholder="请输入球号">
    <input type="text" ng-model="key_count"placeholder="请输入票数">
    <button ng-click="yes(key_name,key_weizhi,key_num,key_count)">提交</button>
</div>
<table>
     <thead>
     <tr>
         <th ng-click="sort('name')" ng-class="red('name')">姓名</th>
         <th ng-click="sort('weizhi')" ng-class="red('weizhi')">位置</th>
         <th ng-click="sort('num')" ng-class="red('num')">球号</th>
         <th ng-click="sort('count')" ng-class="red('count')">票数</th>
     </tr>
     </thead>
     <tbody>
     <tr ng-repeat=" x in items|filter:search|orderBy:'count':revers">
         <td>{{x.name}}</td>
         <td>{{x.weizhi}}</td>
         <td>{{x.num}}</td>
         <td>{{x.count}}</td>
     </tr>
     </tbody>
</table>
</body>
</html>