Angular球员页面---一个简单的Demo

来源：互联网发布：大数据教师培训方案编辑：程序博客网时间：2024/05/15 13:43
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        table{            border-collapse: collapse;        }        td{            padding: 10px;            border: 1px solid #000;        }    </style>    <script src="angular-1.5.5/angular.min.js"></script>    <script>        var myapp=angular.module("myapp",[]);        myapp.controller("myCtrl",function($scope){            $scope.data=[{                name:"张三",                wz:"控球后卫",                num:"11",                ps:"999"            },{                name:"李四",                wz:"大前锋",                num:"21",                ps:"888"            },{                name:"王五",                wz:"小前锋",                num:"23",                ps:"777"            },{                name:"赵六",                wz:"中锋",                num:"10",                ps:"666"            },{                name:"周七",                wz:"得分后卫",                num:"1",                ps:"555"            }];            $scope.search="";            $scope.search2="";            $scope.$watch("search",function(value){                console.log(value);                if(value.indexOf("枪")!=-1){                    alert("包含敏感字");                    $scope.search="";                }else{                    $scope.search2=$scope.search;                }            });            //选择排序部分            $scope.sort="--请选择--";            //$scope.revers=null;            $scope.fun=function(){                if($scope.sort!="--请选择--"){                    if($scope.sort=="票数倒序"){                        $scope.revers=true;                    }else if($scope.sort=="票数正序"){                        $scope.revers=false;                    }                }            };            //新增球员部分            $scope.show=false;            $scope.add=function(){                $scope.show=true;            };            $scope.push=function(){                for(var i=0;i<$scope.data.length;i++){                    if($scope.name==$scope.data[i].name){                        alert("重复");                        return;                    }                }                $scope.data.push({name:$scope.name,wz:$scope.wz,num:$scope.num,ps:$scope.ps});            };            console.log(angular.isNumber(0));        })    </script></head><body ng-app="myapp" ng-controller="myCtrl"><span>查询</span><input type="text" ng-model="search"><span>排序</span><select ng-model="sort" ng-change="fun()">    <option>--请选择--</option>    <option>票数倒序</option>    <option>票数正序</option></select><br/><button ng-click="add()">新增球员</button><table>    <thead>    <tr>        <td>姓名</td>        <td>位置</td>        <td>球号</td>        <td>票数</td>    </tr>    </thead>    <tbody>    <tr ng-repeat="item in data|filter:search2|orderBy:'ps':revers">        <td>{{item.name}}</td>        <td>{{item.wz}}</td>        <td>{{item.num}}</td>        <td>{{item.ps}}</td>    </tr>    </tbody></table><table ng-show="show">    <tr>        <td>姓名</td>        <td><input type="text" ng-model="name"></td>    </tr>    <tr>        <td>位置</td>        <td><input type="text" ng-model="wz"></td>    </tr>    <tr>        <td>球号</td>        <td><input type="text" ng-model="num"></td>    </tr>    <tr>        <td>票数</td>        <td><input type="text" ng-model="ps"></td>    </tr>    <tr>        <td colspan="2"><button ng-click="push()">添加</button></td>    </tr></table></body></html>
阅读全文
0 0