首先定义一个json文件:

然后写HTML文件:

  1. <div id="box">
  2. <!--第一个下拉框-->
  3. <select ng-model="a">
  4. <option value="age">按照年龄排序</option>
  5. <option value="code">按照编码排序</option>
  6. <option value="name">按照姓名排序</option>
  7. </select>
  8. <!--升序还是降序-->
  9. <select ng-model="b">
  10. <option value="">升序</option>
  11. <option value="-">降序</option>
  12. </select>
  13. <!--一个搜索框-->
  14. <input type="text" placeholder="请输入要搜索的内容" ng-model="c"/>
  15. </div>
  16. <!--渲染的数据-->
  17. <div id="wrap">
  18. <table>
  19. <tr>
  20. <th>编码</th>
  21. <th>姓名</th>
  22. <th>年龄</th>
  23. </tr>
  24. <tr ng-repeat="item in data|filter:c|orderBy:b+a">
  25. <td>{{item.code}}</td>
  26. <td>{{item.name}}</td>
  27. <td>{{item.age}}</td>
  28. </tr>
  29. </table>
  30. </div>

angular:

  1. <script>
  2. var app = angular.module("mk",[]);
  3. app.controller("test",function($scope,$http){
  4. $http.get('json/index.json').success(function(data){
  5. $scope.data = eval(data);
  6. $scope.a = "code";
  7. })
  8. })
  9. </script>

在这种运用到的过滤器有filter 、orderBy

这样就完成了一个简单的排序,希望能帮到大家!!!!!!!!

如何angular过滤器进行排序???的更多相关文章

  1. Angular过滤器

    angular中的过滤器有: currency 过滤货币 number  过滤数字, date  过滤日期 json 把js对象过滤为json字符串 limitTo  截取字符串,参数是正数则从左往右 ...

  2. Angular过滤器 自定义及使用方法

    首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参 ...

  3. angular过滤器基本用法

    1.过滤器主要用于数据的筛选,可以直接在模板使用 语法: {{expression | filter}} {{expression | filter | filter2}} {{expression ...

  4. Angular 过滤器的简单使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 简话Angular 04 Angular过滤器详解

    一句话: filter是万能的数据处理器,可以过滤数据,排序数据,删除数据,扩展数据 1. 内置filter大全 url: https://docs.angularjs.org/api/ng/filt ...

  6. angular过滤器使用 自定义过滤器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  7. angular入门--列表排序

    首先,先上代码 <html ng-app="app1"> <head> <meta charset='utf-8' /> <meta na ...

  8. angular 过滤器(日期转换,时间转换,数据转换等)

    (function() { 'use strict'; /** * myApp Module * * Description */ angular.module('myApp') .filter('i ...

  9. Angular 过滤器

    <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...

随机推荐

  1. Qt C++ libcaffe.so无法调用

    在用QT编写调用caffe的工程时,发现一直有个错误: error while loading shared libraries libcaffe.so.1.0.0-rc3: cannot open ...

  2. 老男孩python作业5-开发一个简单的python计算器

    开发一个简单的python计算器 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568 ...

  3. css3 超出文本...显示

    width: 250px 或者 100%; max-width: 285px; overflow: hidden; display: inline-block; white-space: nowrap ...

  4. python 的内置模块 re

    在 pattern 的 “” 前面需要加上一个 r 用来表示这是正则表达式, 而不是普通字符串 >>> import re >>> ptn = r"r[a ...

  5. QDU_组队训练(ABEFGHKL)

    A - Accurately Say "CocaCola"! In a party held by CocaCola company, several students stand ...

  6. 2018acm-icpc青岛站心得

    今年总共两场区域赛,一场南京,一场青岛.南京场队伍真正开始磨合,虽然最后还是铜牌,但是和银牌队伍其实只差一个计算几何的板子的问题.而鉴于南京的教训,所以在准备青岛站的时候,我准备了非常多的模板,还和派 ...

  7. QQ链接病毒分析

    QQ链接病毒分析 特征 点击病毒链接后,自动会在每一时刻范围内通过所有途径群发新的病毒链接(途径包括Qzone,群聊等) 分析 首先看一下病毒链接的一个样例 http://news.soso.com/ ...

  8. npm install时 报错Maximum call stack size exceeded

    给npm降级或者升级 降级 : npm install -g npm@5.4.0 升级 : npm install -g npm  升级到最新版

  9. python操作Spark常用命令

    1. 获取SparkSession spark = SparkSession.builder.config(conf = SparkConf()).getOrCreate() 2. 获取SparkCo ...

  10. [转] Spring Boot中Web应用的统一异常处理

    [From] http://blog.didispace.com/springbootexception/ 我们在做Web应用的时候,请求处理过程中发生错误是非常常见的情况.Spring Boot提供 ...