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

如下所示：

<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排序的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • php自定义二维数组排序函数array_orderby用法示例

    本文实例讲述了php自定义二维数组排序函数array_orderby用法.分享给大家供大家参考,具体如下: <?php /** I came up with an easy way to sort database-style results. This does what example 3 does, except it takes care of creating those intermediate arrays for you before passing control on to

  • Mysql优化order by语句的方法详解

    本篇文章我们将了解ORDER BY语句的优化,在此之前,你需要对索引有基本的了解,不了解的老少爷们可以先看一下我之前写过的索引相关文章.现在让我们开始吧. MySQL中的两种排序方式 1.通过有序索引顺序扫描直接返回有序数据 因为索引的结构是B+树,索引中的数据是按照一定顺序进行排列的,所以在排序查询中如果能利用索引,就能避免额外的排序操作.EXPLAIN分析查询时,Extra显示为Using index. 2.Filesort排序,对返回的数据进行排序 所有不是通过索引直接返回排序结果的操作都

  • MySQL中Order By多字段排序规则代码示例

    说在前面 突发奇想,想了解一下mysql order by排序是以什么规则进行的? 好了,话不多说,直接进入正题吧. MySql order by 单字段 建一测试表如下: CREATE TABLE `a` ( `code` varchar(255) DEFAULT NULL, `name` varchar(255) DEFAULT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; INSERT into a values('中一', '我'); INSERT

  • MySQL简单了解“order by”是怎么工作的

    针对排序来说,order by 是我们使用非常频繁的关键字.结合之前我们对索引的了解再来看这篇文章会让我们深刻理解在排序的时候,是如何利用索引来达到少扫描表或者使用外部排序的. 先定义一个表辅助我们后面理解: CREATE TABLE `t` ( `id` int(11) NOT NULL, `city` varchar(16) NOT NULL, `name` varchar(16) NOT NULL, `age` int(11) NOT NULL, `addr` varchar(128) D

  • MySQL中Union子句不支持order by的解决方法

    本文实例讲述了MySQL中Union子句不支持order by的解决方法.分享给大家供大家参考,具体如下: 我对DB知之甚少,这问题只在MySQL遇到,不知道别的DBMS是不是也如此. 问题是这样的,我打算在一个表里获得与某一行记录相邻的两行,并且想通过union一起取出来,所以这么写: select id,title from subjects where id>#some_id# order by id limit 1 union select id,title from subjects

  • Angular实现的内置过滤器orderBy排序与模糊查询功能示例

    Angular实现的内置过滤器orderBy排序与模糊查询功能示例

    本文实例讲述了Angular实现的内置过滤器orderBy排序与模糊查询功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular模糊查询.排序</title> <style> *{ ma

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

    如下所示: <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" /> &l

  • Vue中使用elementui与Sortable.js实现列表拖动排序

    本文实例为大家分享了使用elementui与Sortable.js实现列表拖动排序的具体代码,供大家参考,具体内容如下 一.安装使用Sortable.js 1.安装 cnpm install sortablejs --save 2.在需要的vue页面单独引入 <script>     import Sortable from 'sortablejs'     export default{         .........         data() {             retur

  • python使用sorted函数对列表进行排序的方法

    本文实例讲述了python使用sorted函数对列表进行排序的方法.分享给大家供大家参考.具体如下: python提供了sorted函数用于对列表进行排序,并且可以按照正序或者倒序进行排列 #创建一个数字组成的列表 numbers = [5, 1, 4, 3, 2, 6, 7, 9] #输出排序后的数字数组 print sorted(numbers) #输出原始数组,并未被改变 print numbers my_string = ['aa', 'BB', 'zz', 'CC', 'dd', "E

  • 浅谈angular.js中实现双向绑定的方法$watch $digest $apply

    Angular.js 中的特性,双向绑定. 多么神奇的功能,让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明: $scope.$watch('参数',function(newValue,oldValue){ //逻辑处理 }) 上面我们就是创建了一个监听器. '参数' 就是$scope

  • Ionic + Angular.js实现图片轮播的方法示例

    Ionic + Angular.js实现图片轮播的方法示例

    本文主要给大家介绍了关于Ionic + Angular实现图片轮播的相关资料,分享出来供大家参考学习,需要的朋友们下面来一起看看吧. 先来看看实现的效果图: 方法示例: template文件夹新建slider.html <ion-view view-title="图片轮播"> <ion-content class="padding" scroll="false"> <ion-slides class="sl

  • vue.js或js实现中文A-Z排序的方法

    实现中文按照A-Z的方法,可以在vue的methods里面写入: methods:{ pySort:function(arr,empty){ var $this = this; if(!String.prototype.localeCompare) return null; var letters = "ABCDEFGHJKLMNOPQRSTWXYZ".split(''); var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀".split('');

  • Angular.JS通过指令操作DOM的方法

    在指令而非在控制器中操作DOM 相信大家在页面处理中,难免会遇到操作DOM的情况,在AngularJS中,对DOM的操作是在指令而非控制器中完成的. AngularJS强调隔离的思想:把复杂的逻辑和操作放在指令或服务中,控制器作为视图和$scope之间的桥梁,仅仅用来存储数据模型. jqLite 为了便于DOM操作,AngularJS内部封装了angular.element,如果现有项目中已经引入的jQuery,angular.element相当于jQuery函数的别名,否则,angular.e

  • 利用Angular.js编写公共提示模块的方法教程

    利用Angular.js编写公共提示模块的方法教程

    前言 在编写一些大型工程的时候,会经常遇到一些公用提示,使用框架自带很多时候不方便,于是我手写了一个,下面来看看详细的介绍: 效果图如下 方法如下 一.先在angular中注册一个模块 二. 注册一个模块 注入依赖 三. 返回不同的方法应对不同情况 四. 获取模板路径 五. 编写模板内容 和普通的页面一样调用使用angular服务 六. 1. 开启http服务获取模板内容 2.  重点注意 $template = $compile(template)(scope); 这句代码非常重要  用于激活

  • Ionic + Angular.js实现验证码倒计时功能的方法

    Ionic + Angular.js实现验证码倒计时功能的方法

    前言 之前跟大家分享了关于 Android 原生实现验证码倒计时,地址是这里,现在公司使用 Ionic 开发的 App 也要实现类似的功能,现在也记录下来,供大家参考: 效果图: 正文 首先介绍下与本文相关的概念 $interval $interval 是 window.setInterval 的 Angular 包装形式,函数如果在没有被取消的时候会无限执行.(取消使用 cancel(promise) ) 用法: $interval(fn,delay,[count],[invokeApply]

  • Angular.js中处理页面闪烁的方法详解

    前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染页面都需要消耗一定的时间,这个间隔可能很小,甚至让人感觉不到,这种情况一切正常,但这个时间也可能很长,这时候用户可能会看到满屏尽是{{xxxx}}.这种情况被叫做"Flash Of Unrendered Content (FOUC)(K)?and is always unwanted.". 问题 为了图方便,我们很喜欢使用下面的做法

随机推荐