表单查询排序添加

来源：互联网发布：南开大学网络教学平台编辑：程序博客网时间：2024/05/16 19:08
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .addUser{            width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3;        }    </style>    <script src="angular.js"></script>    <script src="angular-route.js"></script>    <script type="text/javascript">        var app=angular.module("myApp",["ngRoute"]);        app.config(["$routeProvider",function($routeProvider){            $routeProvider                .when("/addUser",{                    templateUrl:"addUser.html",                    controller:"addUserCtrl"                })        }]);        app.controller("myCtrl",function ($scope,$location) {            $scope.users = [                {"name": "张三", "zhi": "控球后卫", "hao": 11, "shu": 999,"state":false},                {"name": "李四", "zhi": "大前锋", "hao": 21, "shu": 888,"state":false},                {"name": "王五", "zhi": "小前锋", "hao": 23, "shu": 777,"state":false},                {"name": "赵六", "zhi": "中锋", "hao": 10, "shu": 666,"state":false},                {"name": "周七", "zhi": "得分后卫", "hao": 1, "shu": 555,"state":false}            ];            $scope.goToUrl = function(url){                $location.path(url);            };        });            app.controller("addUserCtrl",function($scope){                $scope.a = "";                $scope.b = "";                $scope.c = "";                $scope.d = "";                //提交按钮的点击事件                $scope.tijiao = function(){                    var flag = true;                    //拿到各个输入框的值                    if($scope.a==""||$scope.a==null){                        alert("姓名不能为空");                        flag = false;                    }                    if($scope.b==""||$scope.b==null){                        alert("位置不能为空");                        flag = false;                    }                    if($scope.c==""||$scope.c==null){                        alert("球号不能为空");                        flag = false;                    }                    if($scope.d==""||$scope.d==null){                        alert("票数不能为空");                        flag = false;                    }                    if(flag){                        $scope.duixiang ={                            name:$scope.a,                            zhi:$scope.b,                            hao:$scope.c,                            shu:$scope.d,                            state:false                        };                        $scope.users.push($scope.duixiang);                    }                };            });    </script></head><body ng-app="myApp" ng-controller="myCtrl"><center>    <h3>球员信息表</h3>    <div>        查询<input ng-model="search" placeholder="用户名查询" size="10">        排序<select id="shu" ng-model="b">              <option value="">票数倒序</option>              <option value="-">票数正序</option>            </select><br><br>        <button class="addUser" ng-click="goToUrl('/addUser')" style=" background:blue;">新增球员</button>    </div>    <div>    <table border="1" cellspacing="1" cellpadding="10">        <thead>          <tr>              <th>姓名</th>              <th>位置</th>              <th>球号</th>              <th>票数</th>          </tr>        </thead>        <tbody>        <tr ng-repeat="user in users|filter:{name:search}|orderBy:b+a">            <td>{{user.name}}</td>            <td>{{user.zhi}}</td>            <td>{{user.hao }}</td>            <td>{{user.shu}}</td>        </tr>        </tbody>    </table>    </div><br>    <div ng-view>    </div>    <!-- 1.添加用户页面 -->    <script type="text/ng-template" id="addUser.html">        <table border="1" cellpadding="10" cellspacing="1">            <tbody>            <tr>                <th>姓名:</th>                <td><input type="text" ng-model="a"></td>            </tr>            <tr>                <th>位置:</th>                <td><input type="text" ng-model="b"></td>            </tr>            <tr>                <th>球号:</th>                <td><input type="text" ng-model="c"></td>            </tr>            <tr>                <th>票数:</th>                <td><input type="text" ng-model="d"></td>            </tr>            <tr>            <tr align="center">                <td colspan="2">                    <input type="button" value="提交" ng-click="tijiao()" />                </td>            </tr>            </tbody>        </table>    </script>    <!--指定相应内容--></center></body></html>
阅读全文
0 0
表单查询 排序 添加

表单查询排序添加
