妙用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 mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 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
1 Tube Radio
2021/03/02 无线电
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
python采集百度百科的方法
2015/06/05 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
经济管理专业自荐信
2013/12/30 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
高中学生评语大全
2014/04/25 职场文书
农业生产宣传标语
2014/10/08 职场文书
新员工考核评语
2014/12/31 职场文书
爱晚亭导游词
2015/02/09 职场文书
活动主持人开场白
2015/05/28 职场文书
四风之害观后感
2015/06/09 职场文书
读书笔记怎么写
2015/07/01 职场文书
python分分钟绘制精美地图海报
2022/02/15 Python
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers