AngularJS过滤器应用之表头排序

原创

xyphf_和派孔明 2022-07-22 09:36:19 博主文章分类：数据处理 ©著作权

文章标签 angularjs 应用数据表头排序升序 文章分类 数据结构与算法人工智能

©著作权归作者所有：来自51CTO博客作者xyphf_和派孔明的原创作品，请联系作者获取转载授权，否则将追究法律责任

需求解释：表头排序指的是使用列表方式显示数据时，如果用户单击列表中某列头部元素，那么列表中的全部数据将会自动按该列表的属性值自动排序，默认为升序，再次单击为降序；

案例如下：

AngularJS过滤器应用之表头排序_升序

AngularJS过滤器应用之表头排序_数据_02

AngularJS过滤器应用之表头排序_应用_03

AngularJS过滤器应用之表头排序_应用_04

先贴代码：

<!doctype html>
<html ng-app="a3_4">
<head>
    <title>表头排序</title>
    <script src="../Script/angular.min.js"
            type="text/javascript"></script>
    <style type="text/css">body{font-size:12px}
ul{list-style-type:none;width:408px;margin:0;padding:0}
ul li{float:left;padding:5px 0}
ul .bold{font-weight:700;cursor:pointer}
ul li span{width:52px;float:left;padding:0 10px}
ul .focus{background-color:#ccc}
    </style>
</head>
<body>
    <div ng-controller="c3_4">
        <ul>
            <li ng-class="{{bold}}">
                <span>序号</span>
                <span ng-click="title='name';desc=!desc">
                    姓名
                </span>
                <span ng-click="title='sex';desc=!desc">
                    性别
                </span>
                <span ng-click="title='age';desc=!desc">
                    年龄
                </span>
                <span ng-click="title='score';desc=!desc">
                    分数
                </span>
            </li>
            <li ng-repeat=" stu in data | orderBy : title : desc">
                <span>{{$index+1}}</span>
                <span>{{stu.name}}</span>
                <span>{{stu.sex}}</span>
                <span>{{stu.age}}</span>
                <span>{{stu.score}}</span>
            </li>
        </ul>
    </div>
    <script type="text/javascript">var a3_4 = angular.module('a3_4', []);
        a3_4.controller('c3_4', ['$scope', function ($scope)
            $scope.bold = "bold";
            $scope.title = 'name';
            $scope.desc = 0;
            $scope.data = [
            { name: "张明明", sex: "女", age: 24, score: 95 },
            { name: "李清思", sex: "女", age: 27, score: 87 },
            { name: "刘小华", sex: "男", age: 28, score: 86 },
            { name: "陈忠忠", sex: "男", age: 23, score: 97</script>
</body>
</html>