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 相关文章推荐
javascript学习(一)构建自己的JS库
Jan 02 Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
Jquery树插件zTree用法入门教程
Feb 17 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
canvas绘制多边形
Feb 24 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 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
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
React组件对子组件children进行加强的方法
2019/06/23 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
wxPython中listbox用法实例详解
2015/06/01 Python
python通过socket查询whois的方法
2015/07/18 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
详解python中的线程
2018/02/10 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
为什么相对PHP黑python的更少
2020/06/21 Python
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
工商管理专业毕业生求职信
2014/05/26 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
原告代理词范文
2015/05/25 职场文书
医院病假条范文
2015/08/17 职场文书
MySql数据库触发器使用教程
2022/06/01 MySQL