如何angular过滤器进行排序???
首先定义一个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过滤器进行排序???的更多相关文章
- Angular过滤器
angular中的过滤器有: currency 过滤货币 number 过滤数字, date 过滤日期 json 把js对象过滤为json字符串 limitTo 截取字符串,参数是正数则从左往右 ...
- Angular过滤器 自定义及使用方法
首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参 ...
- angular过滤器基本用法
1.过滤器主要用于数据的筛选,可以直接在模板使用 语法: {{expression | filter}} {{expression | filter | filter2}} {{expression ...
- Angular 过滤器的简单使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 简话Angular 04 Angular过滤器详解
一句话: filter是万能的数据处理器,可以过滤数据,排序数据,删除数据,扩展数据 1. 内置filter大全 url: https://docs.angularjs.org/api/ng/filt ...
- angular过滤器使用 自定义过滤器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- angular入门--列表排序
首先,先上代码 <html ng-app="app1"> <head> <meta charset='utf-8' /> <meta na ...
- angular 过滤器(日期转换,时间转换,数据转换等)
(function() { 'use strict'; /** * myApp Module * * Description */ angular.module('myApp') .filter('i ...
- Angular 过滤器
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...
随机推荐
- C#图片处理3种高级应用(高缩略图清晰度、图片剪裁、图片水印)
利用C#图片处理的一些基本和高级应用,解决了显示排版时想让相片缩略图列表非常统一.整齐.和美观,每张缩略图大小固定为120 x 90且不拉伸变形,用户头像让缩略图比原图更清晰,上传的图片下加一个半透明 ...
- 网络控制芯片AX88796B系列使用简介
目录 1. 特性 2. 结构框图 3. 接收 3.1 缓存空间 3.2 Receiver Buffer Ring 3.3 接收机制 4. 发送 5. 编程过程简要说明 5.1 初始化配置 5.2 接收 ...
- Android 应用资源及R文件的位置
1.介绍 (1)常识 (2)在res目录下新建资源文件(例如数字资源) app--->res,选择res,右击new--->value resource file 2.字符资源(strin ...
- C++_标准模板库STL概念介绍3-函数对象
函数对象也叫做函数符(functor). 函数符是可以以函数方式和( )结合使用的任意对象. 包括函数名,指向函数的指针,重载了()运算符的类对象. 可以这样定义一个类: class Linear { ...
- 洛谷 P3233 [HNOI2014]世界树(虚树+dp)
题面 luogu 题解 数据范围已经告诉我们是虚树了,考虑如何在虚树上面\(dp\) 以下摘自hzwer博客: 构建虚树以后两遍dp处理出虚树上每个点最近的议事处 然后枚举虚树上每一条边,考虑其对两端 ...
- AMD、CMD/AMD与CMD的区别
http://blog.csdn.net/jackwen110200/article/details/52105493
- URAL - 1297 后缀数组的做法 LCP应用
题意:求最长回文子串 这种有专门的O(n)套板子算法,但作为练习还是用后缀数组来解吧 只需把相同的另一个串反接(中间用一个足够小且未出现的字符衔接),然后枚举回文串的中点,不断求解该点往前和往后计算的 ...
- Oracle:DBMS_STATS.GATHER_TABLE_STATS的语法
转自: http://cjjwzs.iteye.com/blog/1143893 作用:DBMS_STATS.GATHER_TABLE_STATS统计表,列,索引的统计信息. DBMS_STATS.G ...
- 【Python】txt数据处理
实战场景 使用safe3wvs扫描,扫描完成后会在当前目录下生成一个日志文件spider.log,截图如下. 现要求将存在sql注入的url地址整理到spider_new.log文件中,下面分享一个自 ...
- BankNote
# coding=utf-8 import pandas as pd import numpy as np from sklearn import cross_validation import te ...