Angular排序实例详解

说点小案例angular的排序

<!DOCTYPE html>
<html ng-app="mk">
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{
    margin: 0px;
    padding: 0px;
   }
   nav{
    text-align: center;
   }
   nav>*{
    vertical-align: top;
   }
   table{
    width: 100%;
    text-align: center;
   }
   table th,td{
    background: #A9A9A9;
    line-height: 30px;
   }
  </style>
 </head>
 <body>
  <div ng-controller="text">
   <nav>
    <select ng-model="a"> <!-- 这也是表单也有数据，她可以获取value值，这几个值代表你循环进来的每项key名 -->
     <option value="num">按编号排序</option>
     <option value="name">按姓名排序</option>
     <option value="age">按年龄排序</option>
    </select>
    <select ng-model="b"> <!-- 也同样获取value值，当为负的时候，是倒序，正序 -->
     <option value="">升序</option>
     <option value="-">降序</option>
    </select>
    <input type="text" ng-model="s"/>
   </nav>
   <table border="0px" id="table">
    <tr>
     <th>编号</th>
     <th>姓名</th>
     <th>年龄</th>
    </tr>
    <tr ng-repeat="value in data | orderBy:b+a | filter:s"> <!-- 过滤器过滤以下数据 b+a这样就字符串拼接到了一起。这样数据改变就进行了排序 -->
     <td>{{value.num}}</td>
     <td>{{value.name}}</td>
     <td>{{value.age}}</td>
    </tr>
   </table>
  </div>
  <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   var app=angular.module("mk",[]);
   app.controller("text",function($scope,$http){
    $http.get("paixu.json").success(function(data){
     $scope.data=data.xinxi
     $scope.a="num";
    })
   });
  </script>
 </body>
</html>

以上所述是小编给大家介绍的Angular排序实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • AngularJS ng-table插件设置排序

    AngularJS ng-table插件设置排序

    基础概念 ng-table提供了一个表头来提供,基础的过滤信息: (1)指定一列的过滤器,然后模板就会使用. (2)ngTable支持number, text, select 和 select-multiple的值模板. (3)可以有选择的为NgTableParams提供初始过滤值. <div class="row"> <div class="col-md-6" ng-controller="demoController as demo&

  • 妙用Angularjs实现表格按指定列排序

    使用AngularJS的过滤器,可以很容易的实现在表格中,点击某一列标题进行排序,实现过程如下: html代码: <table class="table table-border" ng-app="myapp" ng-controller="orderByCtrl"> <thead> <tr> <th>inx</th> <th ng-click="col='name';d

  • AngularJS 过滤与排序详解及实例代码

    AngularJS 过滤与排序详解及实例代码

    前面了解了AngularJS的使用方法,这里就简单的写个小程序,实现查询过滤以及排序的功能. 本程序中可以了解到: 1 angularjs的过滤器 2 ng-repeat的使用方法 3 控制器的使用 4 数据的绑定 程序设计分析 首先,如果要是先查询过滤,就要使用到AngularJS中的 过滤器filter 了. 直接在表达式的后面使用管道命令符 | ,按照下面的写法就可以达到一个过滤的效果: {{ persons | filter:query }} 通过使用filter实现过滤操作,query

  • angular-ui-sortable实现可拖拽排序列表

    angular-ui-sortable实现可拖拽排序列表

    项目需求,添加列表可拖拽排序功能,谷歌了一下,找到一个Angular的插件:angular-ui-sortable,项目地址:https://github.com/angular-ui/ui-sortable 需要在之前引入jquery,和jquery-ui,否则无法使用. 我们要做的事情,加载数据,拖拽排序并输出当前顺序: js代码: <script src="../../jquery.js"></script> <script src="..

  • AngularJS轻松实现双击排序的功能

    话不多说,直接看示例代码 HTML代码 <th class="col-md-3"><a href="" ng-click="desc('2',la=!la)">单价</a></th> <th class="col-md-3"><a href="" ng-click="desc('3',la=!la)">销售金额<

  • Angular排序实例详解

    说点小案例angular的排序 <!DOCTYPE html> <html ng-app="mk"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } nav{ text-align: center; } nav

  • Java Map的排序实例详解

     Java Map的排序实例详解 要对Map中的key-value键值对进行排序,可以使用Collections类提供的sort方法.该方法允许用户使用自定义的排序方法,可以按键进行排序,或者按值进行排序. 具体代码如下: 1.产生需要的数据 Map<String, Integer> map_Data = new HashMap<String, Integer>(); map_Data.put("A", 98); map_Data.put("B&quo

  • python字典排序实例详解

    本文实例分析了python字典排序的方法.分享给大家供大家参考.具体如下: 1. 准备知识: 在python里,字典dictionary是内置的数据类型,是个无序的存储结构,每一元素是key-value对: 如:dict = {'username':'password','database':'master'},其中'username'和'database'是key,而'password'和'master'是value,可以通过d[key]获得对应值value的引用,但是不能通过value得到k

  • javascript中sort排序实例详解

    javascript中sort排序实例详解

    代码如下所示: var arr = [5,32,28,66,2,15,3]; arr.sort(function(a1,a2){ return a1-a2; //a2-a1 输入倒序 }); console.log(arr); console.log(arr.reverse()); //reverse颠倒数组中元素的顺序 var arr2 = ['hezihao','chensan','xiaomin','lishi'] arr2.sort(); console.log(arr2); var a

  • C++ 计数排序实例详解

    C++ 计数排序实例详解

    计数排序 计数排序是一种非比较的排序算法 优势: 计数排序在对于一定范围内的整数排序时,时间复杂度为O(N+K)  (K为整数在范围)快于任何比较排序算法,因为基于比较的排序时间复杂度在理论上的上下限是O(N*log(N)). 缺点: 计数排序是一种牺牲空间换取时间的做法,并且当K足够大时O(K)>O(N*log(N)),效率反而不如比较的排序算法.并且只能用于对无符号整形排序. 时间复杂度: O(N)  K足够大时为O(K) 空间复杂度: O(最大数-最小数) 性能: 计数排序是一种稳定排序

  • 利用JavaScript对中文（汉字）进行排序实例详解

    利用JavaScript对中文（汉字）进行排序实例详解

    前言 在网页上展示列表时经常需要对列表进行排序:按照修改/访问时间排序.按照地区.按照名称排序. 对于中文列表按照名称排序就是按照拼音排序,不能简单通过字符串比较-- 'a' > 'b'--这种方式来实现. 比如比较 '北京' vs '上海',实际是比较 'běijīng' vs 'shànghǎi':比较 '北京' vs '背景',实际是比较 'běijīng' vs 'bèijǐng'. 一般需要获取到字符串的拼音,再比较各自的拼音. 实现方法 JavaScript 提供本地化文字排序,比如

  • 深入IComparable与IComparer的排序实例详解

    如下所示: 复制代码 代码如下: using System;using System.Collections.Generic;using System.Text;using System.Collections;namespace hgoApp{    class Comparer    {        static void Main()        {            Employee[] Employees = new Employee[5]; Employees[0] = ne

  • Java集合和数据结构排序实例详解

    Java集合和数据结构排序实例详解

    目录 概念 插入排序 直接插入排序 代码实现 性能分析 希尔排序 代码实现 性能分析 选择排序 直接选择排序 代码实现 性能分析 堆排序 代码实现 性能分析 交换排序 冒泡排序 代码实现 性能分析 快速排序 代码实现 性能分析 非递归实现快速排序 代码实现 性能分析 归并排序 归并排序 代码实现 性能分析 非递归实现归并排序 代码实现 性能分析 海量数据的排序问题 总结 概念 排序,就是使一串记录,按照其中的某个或某些关键字的大小,递增或递减的排列起来的操作. 平时的上下文中,如果提到排序,通常

  • Angular中$cacheFactory的作用和用法实例详解

    Angular中$cacheFactory的作用和用法实例详解

    先说下缓存: 一个缓存就是一个组件,它可以透明地储存数据,以便以后可以更快地服务于请求.多次重复地获取资源可能会导致数据重复,消耗时间.因此缓存适用于变化性不大的一些数据,缓存能够服务的请求越多,整体系统性能就能提升越多. $cacheFactory介绍: $cacheFactory是一个为Angular服务生产缓存对象的服务.要创建一个缓存对象,可以使用$cacheFactory通过一个ID和capacity.其中,ID是一个缓存对象的名称,capacity则是描述缓存键值对的最大数量. 1.

  • Angular.js之作用域scope'@','=','&'实例详解

    什么是scope AngularJS 中,作用域是一个指向应用模型的对象,它是表达式的执行环境.作用域有层次结构,这个层次和相应的 DOM 几乎是一样的.作用域能监控表达式和传递事件. 在 HTML 代码中,一旦一个 ng-app 指令被定义,那么一个作用域就产生了,由 ng-app 所生成的作用域比较特殊,它是一个根作用域($rootScope),它是其他所有$Scope 的最顶层. 除了用 ng-app 指令可以产生一个作用域之外,其他的指令如 ng-controller,ng-repeat

随机推荐