妙用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 验证插件 Web前端设计模式(asp.net)
Oct 17 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
一个JavaScript获取元素当前高度的实例
Oct 29 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
详解JWT token心得与使用实例
Aug 02 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书写安全的脚本代码
2012/02/05 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
微信支付的开发流程详解
2016/09/13 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
我们是伦敦女孩:WalG
2018/01/08 全球购物
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
内乡县衙导游词
2015/02/05 职场文书
信用卡收入证明范本
2015/06/12 职场文书
警示教育观后感
2015/06/17 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android
快速学习Oracle触发器和游标
2021/06/30 Oracle
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript