Angular 信息管理表

来源：互联网发布：vb 修改批处理编辑：程序博客网时间：2024/05/16 13:42
<!DOCTYPE html><html ng-app="zhou"><head lang="en">    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">    <script type="text/javascript" src="ionic/js/angular/angular.js"></script>    <script type="text/javascript" src="jquery.1.12.4.js"></script>    <title>周考3</title>    <style>        .btn {            background-color: #11c1f3;            width: 100px;            height: 35px;            border-radius: 5px;            border: none;        }        table, th , td  {            border: 1px solid grey;            border-collapse: collapse;            padding: 5px;        }        table tr:nth-child(odd)    {            background-color: #ffffff;        }        table tr:nth-child(even) {            background-color: #f1f1f1;        }    </style>    <script type="text/javascript">        var datas = [            {                id:1,                name:"张三",                work:"控球后卫",                number:11,                arrs:777            },            {                id:2,                name:"李四",                work:"大前锋",                number:21,                arrs:999            },            {                id:3,                name:"王五",                work:"小前锋",                number:23,                arrs:888            },            {                id:4,                name:"赵六",                work:"中锋",                number:10,                arrs:666            },            {                id:5,                name:"周七",                work:"得分后卫",                number:1,                arrs:555            }        ];    </script>    <script type="text/javascript">        var app = angular.module("zhou",[]);        app.controller("zhouCtrl",function($scope) {            $scope.search_paixu="";            $scope.data = datas;            $scope.search = function() {                var  name = "";                if($scope.search_name !=undefined && $scope.search_name !=null) {                    name = $scope.search_name.trim();                }                var array = ["操"];                for(var i=0;i<array.length;i++) {                    var r = new RegExp(array[i],"ig");                    name = name.replace(r,"*");                    if(name.indexOf('*')!='-1') {                        alert("搜索内容有敏感字体");                        return;                    }                }            };            $scope.addUser = function() {                $scope.addUserIsShow = true;            };            $scope.add = function() {                var namen = $scope.names;                if(namen == "张三" || namen == "李四" ||namen == "王五" ||namen == "赵六" ||namen == "周七") {                    alert("球员姓名已存在！");                    return;                }else{                    $scope.data.push({                        name: $scope.names,                        work: $scope.works,                        number: $scope.numbers,                        arrs: $scope.arrss                    });                    $scope.names = "";                    $scope.works = "";                    $scope.numbers = "";                    $scope.arrss = "";                    $scope.addUserIsShow = false;                }            };            $scope.order = function() {                var datas = $scope.data;                if($scope.select_piao==1) {                    datas.sort(function(a,b) {                        return (a.arrs> b.arrs) ? 1:-1;                    });                }else if($scope.select_piao== 2) {                    datas.sort(function(a,b) {                        return (a.arrs < b.arrs) ? 1:-1;                    });                }            }        });    </script></head><body ng-controller="zhouCtrl">   <div class="one">       <span>查询</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;       <span>排序</span><br/>       <input type="text" ng-model="search_name" size="25" style="height: 23px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;       <select ng-model="select_piao" ng-change="order()" style="width: 200px;height: 28px">           <option value="">排序</option>           <option value="1">票数正序</option>           <option value="2">票数倒序</option>       </select><br/><br/>       <button class="btn" ng-click="addUser()">新增球员</button>   </div><br/><br/>   <table style="width: 30%">       <tr style="background-color: #999999;">           <th>姓名</th>           <th>位置</th>           <th>球号</th>           <!--<th ng-click="value='arrs';desc=!desc">票数</th>-->           <th>票数</th>       </tr>       <tr ng-repeat="item in data | filter:search_name:'name'| orderBy:select_piao">           <td>{{ item.name }}</td>           <td>{{ item.work }}</td>           <td>{{ item.number }}</td>           <td>{{ item.arrs }}</td>       </tr>      </table>   <div ng-show="addUserIsShow">       <table border="1">           <tr>               <td>                   姓名：               </td>               <td>                   <input type="text" ng-model="names"/>               </td>           </tr>           <tr>               <td>                   位置：               </td>               <td>                   <input type="text" ng-model="works"/>               </td>           </tr>           <tr>               <td>                   球号：               </td>               <td>                   <input type="text" ng-model="numbers"/>               </td>           </tr>           <tr>               <td>                   票数：               </td>               <td>                   <input type="text" ng-model="arrss"/>               </td>           </tr>           <tr>               <td colspan="2" align="center">                   <button ng-click="add()">提交</button>               </td>           </tr>       </table>   </div></body></html>
阅读全文
0 0