angularjs添加排序查询

最新推荐文章于 2017-12-10 19:02:42 发布

Ren15306

最新推荐文章于 2017-12-10 19:02:42 发布

阅读量458

点赞数 1

本文链接：https://blog.csdn.net/RenZjun/article/details/78328489

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>

    <script>
        var app=angular.module("myapp",[]);
        app.controller("myCtrl",function($scope){
           $scope.h=false;//显示和隐藏添加列表
            $scope.persons=[];//存放添加的内容

            $scope.xz=function(){//新增球员的点击事件点击列表出现
                $scope.h=true;
            }

            $scope.tj = function(){
                for(var i=0;i<$scope.persons.length;i++){//遍历列表的所有数据
                    if($scope.name==$scope.persons[i].name) {//对比数据没有重复的姓名出现
                        alert("您记录的内容已存在");
                        return;
                    }
                }
                //判断不能为空
                if($scope.name!=""&&$scope.name!=null){
                    if($scope.wz!=""&&$scope.wz!=null){
                        if($scope.hao!=""&&$scope.hao!=null){
                            if($scope.number!=""&&$scope.number!=null){
                                $scope.persons.push({//添加
                                    name:$scope.name,
                                    wz:$scope.wz,
                                    hao:$scope.hao,
                                    number:$scope.number});

                                $scope.name="";
                                $scope.wz="";
                                $scope.hao="";
                                $scope.number="";
                                $scope.h=false;//添加成功添加表格关闭
                            }else{
                                alert("票數不能為空");
                            }
                        }else{
                            alert("球号不能为空");
                        }
                    }else{
                        alert("位置不能为空");
                    }
                }else{
                    alert("姓名不能为空");
                }
            }
        });
    </script>

    <!--//css样式-->
    <style>
        .input{
            width: 300px;
            height: 30px;
        }
        .select{
            width: 300px;
            height: 35px;
        }
        .button{
            background-color: deepskyblue;
            width: 100px;
            height: 60px;
            border-radius: 5%;
            margin-top: 30px;
        }
        .table{
            margin-top: 30px;
        }
        .table tr:nth-child(even){
            background-color: #eeeeee;
        }
        .table2{
            position: absolute;
            left: 300px;
            top: 650px;
        }
        .q{
            text-align: center;
        }
    </style>


</head>
<body ng-app="myapp" ng-controller="myCtrl">
<div>
    查询<br>
    <input type="text" class="input" ng-model="names">
</div>
<!--//排序-->
<div style="position: absolute;top: 10px;left: 500px">
    排序<br>
    <select class="select" ng-model="b">
        <option value="">票数正序</option>
        <option value="-">票数倒序</option>
    </select>
</div>
<!--新增球员按钮-->
<button class="button" ng-click="xz()">新增球员</button>

<table border="1" width="60%" cellspacing="0" cellpadding="10" class="table">
    <tr style="background-color: #999">
        <th>姓名</th>
        <th>位置</th>
        <th>球号</th>
        <th>票数</th>
    </tr>
<!--展示界面-->
    <tr ng-repeat="person in persons | filter:{'name':names} | orderBy:b+'number'">
        <td class="q">{{person.name}}</td>
        <td class="q">{{person.wz}}</td>
        <td class="q">{{person.hao}}</td>
        <td class="q">{{person.number}}</td>
    </tr>
</table>
<!--添加的表单-->
<table border="1" cellspacing="0" cellpadding="10" class="table2" ng-show="h">
    <tr>
        <td>姓名</td>
        <td><input type="text" placeholder="请输入姓名" ng-model="name"></td>
    </tr>
    <tr>
        <td>位置</td>
        <td><input type="text" placeholder="请输入位置" ng-model="wz"></td>
    </tr>
    <tr>
        <td>球号</td>
        <td><input type="text" placeholder="请输入球号" ng-model="hao"></td>
    </tr>
    <tr>
        <td>票数</td>
        <td><input type="text" placeholder="请输入票数" ng-model="number"></td>
    </tr>

    <tr>
        <td colspan="2" align="center"><input type="button" value="提交" ng-click="tj()"></td>
    </tr>
</table>

</body>
</html>

Ren15306

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs添加排序查询

var app = angular.module("myapp",[]); app.controller("myctrl",function($scope){ $scope.h=false; $scope.persons=[]; $scope.xz = function(){
复制链接

扫一扫