妙用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 相关文章推荐
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
javaScript call 函数的用法说明
Apr 09 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
详解JavaScript中return的用法
May 08 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
vue计算属性get和set用法示例
Feb 08 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
ExtJs的Date格式字符代码
2010/12/30 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
Python的函数嵌套的使用方法
2014/01/24 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
学python最电脑配置有要求么
2020/07/05 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
咖啡书吧创业计划书
2014/01/13 职场文书
加入学生会演讲稿
2014/04/24 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
普通话演讲稿
2014/09/03 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
安全保证书
2015/01/16 职场文书
通知函格式范文
2015/04/27 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书