【AngularJS】表头排序

最新推荐文章于 2019-02-25 15:21:00 发布

abloume

最新推荐文章于 2019-02-25 15:21:00 发布

阅读量582

点赞数

本文链接：https://blog.csdn.net/u013451157/article/details/60322659

版权

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
  body{font-size: 12px;}
  ul{
    list-style-type: none;
    width: 408px;
    margin: 0px; padding: 0px;
  }
  ul li{
    float: left;
    padding: 5px 0px;
  }
  ul .bold{
    font-weight: bold;
    cursor: pointer;
  }
  ul li span{
    width: 52px;
    float: left;
    padding: 0px 10px;
  }
  ul .focus{
    background-color: #ccc;
  }
</style>
</head>
<body>
  <div ng-controller="myCtrl">
    <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>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', 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: 99}
      ];
    })
  </script>
</body>
</html>

表头排序是指在使用列表方式显示数据时，用户如果单击列表中某列的表头元素，那么，列表中的全部数据将会自动按该列的属性值自动排序，默认为升序排列，再次单击该列表头元素时，则又变为降序，通过这种方式显示数据，可以快速定位所关注的某项数据，给用户实现这个表头排序的功能。

abloume

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【AngularJS】表头排序

表头排序是指在使用列表方式显示数据时，用户如果单击列表中某列的表头元素，那么，列表中的全部数据将会自动按该列的属性值自动排序，默认为升序排列，再次单击该列表头元素时，则又变为降序，通过这种方式显示数据，可以快速定位所关注的某项数据，给用户实现这个表头排序的功能。
复制链接

扫一扫