简单排序

最新推荐文章于 2025-07-27 20:22:41 发布

android1986

最新推荐文章于 2025-07-27 20:22:41 发布

阅读量79

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wsq110/p/7735398.html

本文详细介绍如何使用AngularJS实现动态表格的排序和过滤功能，包括通过点击表头进行排序，以及利用下拉框筛选特定性别数据的方法。文章提供完整的HTML、CSS和JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
        }
        th,td{
            padding: 10px;
            border: 1px solid #000;
        }
        .top{
            display: inline-block;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top:10px solid red;
        }
        .bot{
            display: inline-block;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-bottom:10px solid red;
        }
    </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.sortColumn="num";
            $scope.revers=false;
            $scope.sort=function(column){
                console.log(column);
                if($scope.sortColumn==column){
                    $scope.revers=!$scope.revers;
                }
                $scope.sortColumn=column;
            };
            $scope.getClass=function(column){
                if($scope.sortColumn==column){
                    if($scope.revers==true){
                        return "top"
                    }else{
                        return "bot"
                    }
                }
            };
            $scope.sex="--请选择--";
            $scope.filt=function(item){
                if($scope.sex!="--请选择--"){
                    if(item.wz==$scope.sex){
                        return true;
                    }else{
                        return false;
                    }
                }else{
                    return true;
                }
            }
            $scope.fun=function(){
                console.log($scope.sex);
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<select ng-model="sex" ng-click="fun()">
    <option>--请选择--</option>
    <option>男</option>
    <option>女</option>
</select>
<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>位置</th>
        <th ng-click="sort('num')">球号<span ng-class="getClass('num')"></span></th>
        <th ng-click="sort('ps')">得分<span ng-class="getClass('ps')"></span></th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in data|orderBy:sortColumn:revers|filter:filt">
        <td>{{item.name 

}}</td>
        <td>{{item.wz}}</td>
        <td>{{item.num}}</td>
        <td>{{item.ps 

}}</td>
    </tr>
    </tbody>
</table>
</body>
</html>

转载于:https://www.cnblogs.com/wsq110/p/7735398.html