首先定义一个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. 关于 SimpleMembership 中 CreateDate 的问题

    使用 WebMatrix.WebData.WebSecurity.CreateUserAndAccount(model.UserName, model.Password,                ...

  2. LeetCode记录之13——Roman to Integer

    能力有限,这道题采用的就是暴力方法,也只超过了39%的用户.需要注意的就是罗马数字如果IXC的后一位比前一位大的采取的是减的方式. Given a roman numeral, convert it ...

  3. docker大概理解

    #是啥# 轻量级的虚拟机,占用资源远小于一般意义上的虚拟机(例如:vmware,hyper-v) #特点# 启动快,体积小,开销少 #本质# Linux容器的一种封装 参考: 阮一峰博客 http:/ ...

  4. 创建一个流(Stream)可以让Bitmap或Image保存到流里面

    创建一个流(Stream)可以让Bitmap或Image保存到流里面   http://blog.csdn.net/angxiao/article/details/7481465 写文件流       ...

  5. 【AC自动机】【字符串】【字典树】AC自动机 学习笔记

    blog:www.wjyyy.top     AC自动机是一种毒瘤的方便的多模式串匹配算法.基于字典树,用到了类似KMP的思维.     AC自动机与KMP不同的是,AC自动机可以同时匹配多个模式串, ...

  6. HDU6393(LCA + RMQ + 树状数组) n边图,两点最短距离 , 修改边权

    这道题的进阶版本 进阶版本 题意: 一个n个点,n条边的图,2中操作,1是将某条边的权值更改,2是询问两点的最短距离. 题解: 由于n个点,n条边,所以是树加一个环,将环上的边随意取出一条,就是1颗树 ...

  7. HDU - 2604 矩阵快速幂 字符串递推 两种解法

    记dp[i]为长度i且符合题意的方案数,dp[n]就是解 符合方案的是不含fmf和fff子串的字符串 考虑如何从前面几项递推出后面第i项 (★表示存在生成的非法方案)←其实没啥用处 i=1时 m③ f ...

  8. [转] Akka实战:构建REST风格的微服务

    [From] http://www.yangbajing.me/2015/11/27/akka%E5%AE%9E%E6%88%98%EF%BC%9A%E6%9E%84%E5%BB%BArest%E9% ...

  9. Djang视图层

    视图 1.什么是视图 视图就是Django项目下的view.py,它的内部是一系列的函数或者是类,用来专门处理客户端访问请求并且返回相应的数据,相当于一个中央处理系统. 2.具体视图实例 3.CBV和 ...

  10. centos7升级firefox的flash插件

    1. 在https://get.adobe.com/flashplayer/下载文件.选择.tar.gz. 2. 下载的文件名为flash_player_npapi_linux.x86_64.tar. ...