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中的数学函数集合
May 08 Javascript
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
AngularJs 常用的过滤器
May 15 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 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 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
javascript实现前端成语点击验证
2020/06/24 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python之import机制详解
2014/07/03 Python
Python之os操作方法(详解)
2017/06/15 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
几个常见的软件测试问题
2016/09/07 面试题
ktv收银员岗位职责
2013/12/16 职场文书
办公室前台的岗位职责
2013/12/20 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
三方股东合作协议书
2014/10/28 职场文书
大学生助学金感谢信
2015/01/21 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP
java代码实现空间切割
2022/01/18 Java/Android
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python