首先定义一个json文件:

然后写HTML文件:

 <div id="box">
<!--第一个下拉框-->
<select ng-model="a">
<option value="age">按照年龄排序</option>
<option value="code">按照编码排序</option>
<option value="name">按照姓名排序</option>
</select>
<!--升序还是降序-->
<select ng-model="b">
<option value="">升序</option>
<option value="-">降序</option>
</select>
<!--一个搜索框-->
<input type="text" placeholder="请输入要搜索的内容" ng-model="c"/>
</div>
<!--渲染的数据-->
<div id="wrap">
<table>
<tr>
<th>编码</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr ng-repeat="item in data|filter:c|orderBy:b+a">
<td>{{item.code}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>

angular:

 <script>
var app = angular.module("mk",[]);
app.controller("test",function($scope,$http){
$http.get('json/index.json').success(function(data){
$scope.data = eval(data);
$scope.a = "code";
})
})
</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. 关于执行webdriver.Chrome; 报错WebDriverException: Message: unknown error: Element is not clickable at point (1085, 103)

    from selenium import webdriverfrom time import sleep dr = webdriver.Chrome() dr.get("http://pj1 ...

  2. HDU - 5997 树状数组+set

    和之前一道省选题目很像: (梦幻布丁): 我们维护的时候用树状数组维护,在断电处打上标记: 合并的时候小的合并到大的里面: #include<iostream> #include<c ...

  3. 查看SELinux状态及关闭SELinux

    查看SELinux状态: 输入:/usr/sbin/sestatus -v SELinux status: enabled           ##开启状态 关闭SELinux 修改vi /etc/s ...

  4. 洛谷 P2234 [HNOI2002]营业额统计

    题目描述 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每天的营业额.分析营业情况是 ...

  5. Qt 学习之路 2(70):进程间通信

    Qt 学习之路 2(70):进程间通信 豆子 2013年11月12日 Qt 学习之路 2 16条评论 上一章我们了解了有关进程的基本知识.我们将进程理解为相互独立的正在运行的程序.由于二者是相互独立的 ...

  6. liunx 请求服务器连接数相关设置

    一. 文件数限制修改 1.用户级别 修改 nr_open 限制 (用途:能够配置nofile最大数) cat /proc/sys/fs/nr_open Linux 内核 2.6.25 以前,在内核里面 ...

  7. IntersectionObserver

    创建对象 var io = new IntersectionObserver(callback, option); IntersectionObserver是浏览器原生提供的构造函数,接受两个参数:c ...

  8. Linux之旅(二)

    上一章讲到,mysql 安装遇到问题 ...莫名其妙好了,此处已回想不起为什么好了,只得跳过. 六.安装php7 参考教程[ http://www.thinkphp.cn/topic/48196.ht ...

  9. 【前缀和】【two-pointer】【贪心】洛谷 P3143 [USACO16OPEN]钻石收藏家Diamond Collector 题解

        解法众多的一道毒瘤题? 题目描述 奶牛Bessie很喜欢闪亮亮的东西(Baling~Baling~),所以她喜欢在她的空余时间开采钻石!她现在已经收集了\(N\)颗不同大小的钻石,现在她想在谷 ...

  10. Java正则表达式-捕获组

    private Set<String> getCodes(String s) { Set<String> resultSet = new HashSet<>(); ...