angularjs实现表格（球员）

来源：互联网发布：lua 人工智能编辑：程序博客网时间：2024/04/30 03:59
<!DOCTYPE html><html  ng-app="myApp"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .even_cls {            background-color: #fff;        }        .odd_cls {            background-color: #999;        }    </style>    <script src="jquery.1.12.4.js" type="text/javascript"></script>    <script src="angular-1.3.0.js" type="text/javascript"></script>    <script src="angular.js" type="text/javascript"></script>    <script src="angular-route.js" type="text/javascript"></script>    <script>        var ming=true;        var example_data = [            {                xing_ming: "张三",                wei_zhi: "控球后卫",                qiu_hao: 11,                piao_shu: 999            },            {                xing_ming: "李四",                wei_zhi: "大前锋",                qiu_hao: 21,                piao_shu: 1000            },            {                xing_ming: "王五",                wei_zhi: "小前锋",                qiu_hao: 23,                piao_shu: 777            },            {                xing_ming: "赵六",                wei_zhi: "中锋",                qiu_hao: 10,                piao_shu: 666            },            {                xing_ming: "周七",                wei_zhi: "得分后卫",                qiu_hao: 1,                piao_shu: 555            }        ];        var app=angular.module("myApp",[]);        app.controller("myCtrl",function($scope){            $scope.data=example_data;            alert("a")            $scope.add_qiu_yuan_form=false;            $scope.showAddQiuYuanForm=function(){                $scope.add_qiu_yuan_form=true;            }            $scope.search=function(){                if($scope.search_xing_ming_value==undefined ||                        $scope.search_xing_ming_value==""){                    $("tr").show();                    return;                }                if($scope.search_xing_ming_value=="擦"){                    alert("出不来");                    return;                }                for(var idx in $scope.data){                    var tridx=parseInt(idx)+1;                    if($scope.search_xing_ming_value==$scope.data[idx].xing_ming){                        $("tr:eq("+tridx+")").show();                    }else{                        $("tr:eq("+tridx+")").hide();                    }                }            }            $scope.submitQiuYuanForm=function(){                if ($scope.xing_ming == undefined || $scope.xing_ming == "") {                     alert("姓名不能为空！");                    return;                }                if ($scope.wei_zhi == undefined || $scope.wei_zhi == "") {                    return;                }                if ($scope.qiu_hao == undefined || $scope.qiu_hao == "") {                    return;                }                if ($scope.piao_shu == undefined || $scope.piao_shu == "") {                    return;                }                if(!/^\d+$/.test($scope.qiu_hao)){                    alert("球号必须是整数！");                    return;                }                if (!/^\d+$/.test($scope.piao_shu)) {                    alert("票数必须是整数！");                    return;                }                $scope.data.push(                        {                            xing_ming:$scope.xing_ming,                            wei_zhi: $scope.wei_zhi,                            qiu_hao: $scope.qiu_hao,                            piao_shu: $scope.piao_shu                        }                );                example_data.sort(function(a,b){                    if(ming){                        return a.piao_shu< b.piao_shu?1:-1;                    }else{                        return a.piao_shu> b.piao_shu?1:-1;                    }                });                $scope.xing_ming="",                        $scope.wei_zhi="",                        $scope.qiu_hao="",                        $scope.piao_shu=""                $scope.add_qiu_yuan_form = false;            }            $scope.order2 = function () {                if($scope.search_piao_shu_value==2){                    ming=true;                }else{                    ming=false;                }                example_data.sort(function(a,b){                    if(ming){                        return a.piao_shu< b.piao_shu?1:-1;                    }else{                        return a.piao_shu> b.piao_shu?1:-1;                    }                });            }            $scope.example_data=example_data;            example_data.sort(function(a,b){                if(ming){                    return a.piao_shu> b.piao_shu?1:-1;                }else{                    return a.piao_shu< b.piao_shu?1:-1;                }            });        });    </script></head><body ng-controller="myCtrl">查询：<input type="text" ng-model="search_xing_ming_value" ng-change="search()"/><select ng-model="search_piao_shu_value" ng-change="order2()">    <option value="">票数正序</option>    <option value="2">票数倒序</option></select><br/><button ng-click="showAddQiuYuanForm()">新增球员</button><table border="1">    <thead>    <tr style="background-color: #666">        <th>姓名</th>        <th>位置</th>        <th>球号</th>        <th>票数</th>    </tr>    </thead>    <tr ng-repeat="qiu_yuan in data"        ng-class="{even_cls: !$even, odd_cls: !$odd}">        <td>{{qiu_yuan.xing_ming}}</td>        <td ng-bind="qiu_yuan.wei_zhi"></td>        <td ng-bind="qiu_yuan.qiu_hao"></td>        <td ng-bind="qiu_yuan.piao_shu"></td>    </tr></table><div  ng-show="add_qiu_yuan_form">    <p>添加球员</p>    <p>姓名：<input type="text" ng-model="xing_ming"/></p>    <p>位置：<input type="text" ng-model="wei_zhi"/></p>    <p>球号：<input type="text" ng-model="qiu_hao"/></p>    <p>票数：<input type="text" ng-model="piao_shu"/></p>    <p>        <button ng-click="submitQiuYuanForm()">提交</button>    </p></div></body></html>
阅读全文
0 0