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 相关文章推荐
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
js的写法基础分析
Jan 17 Javascript
javascript获取url上某个参数的方法
Nov 08 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
简单使用webpack打包文件的实现
Oct 29 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
合作指挥官:孟斯克
2020/03/16 星际争霸
php多层数组与对象的转换实例代码
2013/08/05 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
js 对象是否存在判断
2009/07/15 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
python查询mysql中文乱码问题
2014/11/09 Python
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
谈谈Python中的while循环语句
2019/03/10 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
python turtle 绘制太极图的实例
2019/12/18 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
大学自我鉴定范文
2013/12/26 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
超市创业计划书
2014/04/24 职场文书
保护环境建议书400字
2014/05/13 职场文书
2014组织生活会方案
2014/05/19 职场文书
妇女工作先进事迹
2014/08/17 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
MySQL开启事务的方式
2021/06/26 MySQL
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技