妙用Angularjs实现表格按指定列排序


Posted in Javascript onJune 23, 2017

使用AngularJS的过滤器,可以很容易的实现在表格中,点击某一列标题进行排序,实现过程如下:

html代码:

<table class="table table-border" ng-app="myapp" ng-controller="orderByCtrl">
  <thead>
    <tr>
      <th>inx</th>
      <th ng-click="col='name';desc=!desc">name</th>
      <!-- 当点击列标题时,执行click事件,将排序条件反转,即,如果原来是升序则将按降序,降序亦如此 -->
      <th ng-click="col='gender';desc=!desc">gender</th>
      <th ng-click="col='age';desc=!desc">age</th>
      <th ng-click="col='score';desc=!desc">score</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="d in data|orderBy:col:desc">
      <td ng-bind="$index+1"></td>
      <td ng-bind="d.name"></td>
      <td ng-bind="d.gender"></td>
      <td ng-bind="d.age"></td>
      <td ng-bind="d.score"></td>
    </tr>
  </tbody>
</table>

js代码:

var app = angular.module('myapp', []);
app.controller('orderByCtrl', function($scope) {
  $scope.col = 'name';//默认按name列排序
  $scope.desc = 0;//默认排序条件升序
  $scope.data = [{
    name: 'name 1',
    gender: 'male',
    age: 26,
    score: 70
  }, {
    name: 'name 2',
    gender: 'female',
    age: 24,
    score: 84
  }, {
    name: 'name 3',
    gender: 'male',
    age: 20,
    score: 76
  }, {
    name: 'name 4',
    gender: 'female',
    age: 22,
    score: 64
  }];
})

让运行界面好看些,使用了bootstrap.min.css样式库。为了交互性考虑,在表头增加了手指样式

th {
  cursor: pointer;
}

以上所述是小编给大家介绍的妙用Angularjs实现表格按指定列排序,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
Javascript高级技巧分享
Feb 25 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
javascript生成随机数的方法
May 16 Javascript
js实现div弹出层的方法
Nov 20 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 Javascript
VUE中v-model和v-for指令详解
Jun 23 #Javascript
JavaScript正则表达式简单实用实例
Jun 23 #Javascript
js中的事件委托或是事件代理使用详解
Jun 23 #Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 #Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 #Javascript
微信小程序组件 marquee实例详解
Jun 23 #Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 #Javascript
You might like
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
PHP 一个页面执行时间类代码
2010/03/05 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
php实现简易计算器
2020/08/28 PHP
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
Python __slots__的使用方法
2020/11/15 Python
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
岗位职责定义及内容
2013/11/08 职场文书
总账会计岗位职责
2014/03/13 职场文书
学历公证书范本
2014/04/09 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
党的群众路线学习材料
2014/05/16 职场文书
大学生求职信范文
2014/05/24 职场文书
求职教师自荐书
2014/06/19 职场文书
项目备案申请报告
2015/05/15 职场文书
学生会部长竞选稿
2015/11/19 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS