首先定义一个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. ExtJS 4.2.1学习笔记(一)——MVC架构与布局

    1       ExtJS入门 1.1     支持所有主流浏览器 调试推荐:chrome.Safari.Firefox 1.2     推荐目录结构 - appname (包含所有程序代码,是根目录 ...

  2. Flume自定义拦截器(Interceptors)或自带拦截器时的一些经验技巧总结(图文详解)

    不多说,直接上干货! 一.自定义拦截器类型必须是:类全名$内部类名,其实就是内部类名称 如:zhouls.bigdata.MySearchAndReplaceInterceptor$Builder 二 ...

  3. (Keil) Debug & Simulation 操作

    0x00 printf在MCU環境下print debug error message,利用Logic Analyzer模擬MCU register or GPIO狀態. 若是要要使用printf函數 ...

  4. PHP将数据库数据批量生成word文档

    <?php    class word{         function start(){            ob_start();            echo '<html x ...

  5. 使用 Flask 实现 RESTful API

    原文出处: Luis Rei   译文出处:nummy 简介 首先,安装Flask     1 pip install flask 假设那你已经了解RESTful API的相关概念,如果不清楚,可以阅 ...

  6. ansible基本模块-copy

    ansible   XXX   -m copy  -a  “src=XXX  dest=XXX  owner=root  group=root  mode=0755”

  7. 关于:“无法序列化会话状态。在“StateServer”或“SQLServer”模式下,...的问题

    关于:“无法序列化会话状态.在“StateServer”或“SQLServer”模式下,...的问题 错误描述: 无法序列化会话状态.在“StateServer”或“SQLServer”模式下,ASP ...

  8. UVALive - 2678 二分/尺取

    题意:求最小的长度L满足该长度上的元素和大于等于S 最近dp做多了总有一种能用dp解决一切的错觉 二分长度解决 #include<iostream> #include<algorit ...

  9. Selenium WebDriver的简单操作说明

    [From] http://blog.csdn.net/xiao190128/article/details/49784121 1.打开一个测试浏览器 对浏览器进行操作首先需要打开一个浏览器,接下来才 ...

  10. html中一个div怎么引入另一个页面

    转载:https://zhidao.baidu.com/question/588973997598951645.html