moni

来源：互联网发布：淘宝店铺美工重要吗编辑：程序博客网时间：2024/06/03 14:28

<!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,td{
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid black;
        }
        .font{
            background: red;
        }
    </style>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope,$http) {
            $http({
                url:"package.json",
                method:"GET"
            }).then(function (data) {
                $scope.items=data.data;
            });
            //过滤敏感字
            $scope.search2="";
            $scope.search="";
            $scope.$watch("search",function (value) {
                if(value.indexOf("法轮功")!=-1){
                    alert("您输入的是敏感字");
                    $scope.search="";
                }else{
                    $scope.search2=$scope.search;
                }
            });
            //点谁按谁排序
          /* $scope.revers=false;
            $scope.mysort="name";
            $scope.sort=function (coulm) {
                if($scope.mysort==coulm){
                    $scope.revers=!$scope.revers;
                }
                $scope.mysort=coulm;
            };*/
            //变色
           /* $scope.red=function (mysort) {
                if( mysort==$scope.mysort){
                    return "font";
                }
            };*/
            //点击全选
            $scope.CheckedAll=function () {
                if($scope.AllChecked==true){
                    for(var i=0;i<$scope.items.length;i++){
                        $scope.items[i].check=true;
                    }
                }else{
                    for(var i=0;i<$scope.items.length;i++){
                        $scope.items[i].check=false;
                    }
                }
            };
            $scope.itemsChecked=function () {
                var flag=0;
                for(var i=0;i<$scope.items.length;i++){
                   if( $scope.items[i].check==true){
                       flag++;
                   }else{
                       flag--;
                   }

                }
                if(flag==$scope.items.length){
                    $scope.AllChecked=true;
                }else{
                    $scope.AllChecked=false;
                }
            };
            //添加
            $scope.show=false;
            $scope.newAdd=function () {
                $scope.show=true;
            };
            //提交
            $scope.tj=function () {
                if($scope.nameNext==""||$scope.nameNext==null) {
                    alert("不能为空")
                }else if($scope.correct==true){
                    $scope.items[$scope.index].name=$scope.nameNext;
                    $scope.items[$scope.index].num=$scope.qiuNext;
                    $scope.items[$scope.index].count=$scope.piaoNext;

                }
                else{
                    for(var i=0;i<$scope.items.length;i++){
                        if($scope.nameNext==$scope.items[i].name){
                            alert("已存在");
                            $scope.nameNext="";
                            $scope.weiNext="";
                            $scope.qiuNext="";
                            $scope.piaoNext="";
                            return;
                        }
                    }
                    $scope.items.push({
                        name:$scope.nameNext,
                        weizhi:$scope.weiNext,
                        num:$scope.qiuNext,
                        count:$scope.piaoNext
                    });

                }
                $scope.show=false;
            };
            //修改
            $scope.updateBtn=function (index) {
                $scope.show=true;
                $scope.nameNext=$scope.items[index].name;
                $scope.weiNext=$scope.items[index].weizhi;
                $scope.qiuNext=$scope.items[index].num;
                $scope.piaoNext=$scope.items[index].count;
                //设置一个开关
                $scope.correct=true;
                //记录索引
                $scope.index=index;
            };
            //按球号查找
            $scope.finds="--请选择--";
            $scope.countFun=function (item) {
                if($scope.finds!="--请选择--"){
                    var arr=$scope.finds.split("-");
                    var min=arr[0];
                    var max=arr[1];
                    if(item.num>max||item.num>min){
                        return false;
                    }else{
                        return true;
                    }

                }else{
                    return true;
                }
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text" ng-model="search" placeholder="模糊查询">
按球号查找<select ng-model="finds">
    <option>--请选择--</option>
    <option>1-10</option>
    <option>11-20</option>
    <option>21-30</option>
    <option>31-40</option>

</select>
<table>
    <thead>
    <tr>
        <th><input type="checkbox" ng-model="AllChecked" ng-click="CheckedAll()"></th>
        <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>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="x in items|filter:search2|filter:countFun|orderBy:mysort:revers">
        <th><input type="checkbox" ng-model="x.check" ng-click="itemsChecked()"></th>
        <th>{{x.name}}</th>
        <th>{{x.weizhi}}</th>
        <th>{{x.num}}</th>
        <th>{{x.count}}</th>
        <th><button ng-click="updateBtn($index)">修改</button></th>
    </tr>
    </tbody>
</table>
<button ng-click="newAdd()" style="width: 200px;height: 30px;line-height: 30px;text-align: center">添加</button>
<table ng-show="show">
    <tbody>
    <tr>
        <td>姓名</td>
        <td><input type="text" ng-model="nameNext" placeholder="请输入姓名"></td>
    </tr>
    <tr>
        <td>位置</td>
        <td><input type="text" ng-model="weiNext" placeholder="请输入位置"></td>
    </tr>
    <tr>
        <td>球号</td>
        <td><input type="text" ng-model="qiuNext" placeholder="请输入球号"></td>
    </tr>
    <tr>
        <td>票数</td>
        <td><input type="text" ng-model="piaoNext" placeholder="请输入票数"></td>
    </tr>
    <tr>
        <td colspan="2"><button ng-click="tj()">提交</button></td>
    </tr>
    </tbody>
</table>
</body>
</html>

阅读全文

0 0