妙用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 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
详解Vue中watch的高级用法
May 02 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 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加MYSQL服务器
2006/10/09 PHP
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
js实现点赞效果
2020/03/16 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
Python类属性的延迟计算
2016/10/22 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
毕业生自我鉴定实例
2014/01/21 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
齐云山导游词
2015/02/06 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
工作证明书
2015/06/15 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
深入理解Pytorch微调torchvision模型
2021/11/11 Python
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL
2022微信温控新功能上线
2022/05/09 数码科技