妙用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文本框(input textare)事件绑定方法教程
Apr 24 Javascript
js使用ajax读博客rss示例
May 06 Javascript
jquery获取radio值实例
Oct 16 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
js实现简单数字变动效果
Nov 06 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
js实现图片局部放大效果详解
Mar 18 Javascript
详解vue-cli中使用rem,vue自适应
May 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之第二天
2006/10/09 PHP
php生成随机数或者字符串的代码
2008/09/05 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
理解Javascript_10_对象模型
2010/10/16 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
浅析vue-router原理
2018/10/19 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
python之PyMongo使用总结
2017/05/26 Python
python实现爬取图书封面
2018/07/05 Python
python3 flask实现文件上传功能
2020/03/20 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
设计毕业生简历中的自我评价
2013/10/01 职场文书
求职简历自荐信范文
2013/10/21 职场文书
外企办公室竞聘演讲稿
2013/12/29 职场文书
小学校园活动策划
2014/01/30 职场文书
少先队活动总结
2014/08/29 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
二手车转让协议书
2015/01/29 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS