angular.js实现列表orderby排序的方法


Posted in Javascript onOctober 02, 2018

如下所示:

<html ng-app>
<head>
  <title>order by</title> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link href="../book/css/bootstrap.css" rel="external nofollow" rel="stylesheet" type="text/css" /> 
  <script src="../file/angular-1.0.1.min.js" type="text/javascript"></script>
</head> 
<body>
  <div class="table-responsive" ng-controller="demoController">
    <table id="tb" class="table table-bordered table-hover">
    <thead>
     <tr>
      <th class="col-md-2">编号</th>
      <th class="col-md-4">国家</th>
      <th class="col-md-4">名称</th> 
      <th class="col-md-3">年龄</th> 
     </tr>     
    </thead>
    <tbody id="tbody" ng-repeat="stu in data | orderBy : '-age' | limitTo: 10"> 
      <tr class="{{ cls($index) }}">
       <td>{{ $index + 1 }}</td><td>{{ stu.country }}</td><td>{{ stu.name }}</td><td>{{ stu.age }}</td>
      </tr> 
    </tbody>
   </table>
   </div> 
   <script type="text/javascript">
     function demoController($scope,$window) {
       $scope.data = [
        { seq: 1, name: "魏国", country: "曹操",age : 45 },
        { seq: 2, name: "魏国", country: "张辽" ,age: 34},
        { seq: 3, name: "魏国", country: "司马懿" ,age: 36 },
        { seq: 4, name: "魏国", country: "夏侯淳",age: 40 },
        { seq: 5, name: "蜀国", country: "刘备",age: 50 },
        { seq: 6, name: "蜀国", country: "关羽",age: 45 },
        { seq: 7, name: "蜀国", country: "张飞",age: 46 },
        { seq: 8, name: "蜀国", country: "赵云",age: 35 },
        { seq: 9, name: "吴国", country: "孙权" ,age: 30 },
        { seq: 10, name: "吴国", country: "周瑜",age: 32 },
        { seq: 11, name: "吴国", country: "鲁肃",age: 33 },
        { seq: 12, name: "吴国", country: "黄盖",age: 55 }
       ];
        $scope.cls = function(i) { 
          return (i + 1) % 4 == 1 ? "active" : "";
        }
     }
   </script>
</body>
</html>

效果:

angular.js实现列表orderby排序的方法

以上这篇angular.js实现列表orderby排序的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
eval与window.eval的差别分析
Mar 17 Javascript
简单易用的倒计时js代码
Aug 04 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
javascript 取小数点后几位几种方法总结
Aug 02 Javascript
Vue 自定义动态组件实例详解
Mar 28 Javascript
js中的数组对象排序分析
Dec 11 Javascript
Angularjs实现数组随机排序的方法
Oct 02 #Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 #Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 #Javascript
angular ng-model 无法获取值的处理方法
Oct 02 #Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 #Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 #Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 #Javascript
You might like
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
javascript 一些用法小结
2009/09/11 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
前端vue如何使用高德地图
2020/11/05 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
python字典get()方法用法分析
2015/04/17 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
公司培训欢迎词
2014/01/10 职场文书
英语故事演讲稿
2014/04/29 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
农村党员对照检查材料
2014/09/24 职场文书
简历自我评价模板
2015/03/11 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python