如何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 ...
随机推荐
- update 多表链接
update Aset A.shl = A.shl - B.shl from retmxls A,daysphz Bwhere A.spid = B.spid and A.fdbs = B.fdbs ...
- 洛谷 P1503 鬼子进村
题目背景 小卡正在新家的客厅中看电视.电视里正在播放放了千八百次依旧重播的<亮剑>,剧中李云龙带领的独立团在一个县城遇到了一个鬼子小队,于是独立团与鬼子展开游击战. 题目描述 描述 县城里 ...
- COCO2018 stuff分割
stuff何许人也,相对于目标而言的环境信息,一般是图像中的草地,墙面或者天空,因为往往在一张图像中这些背景占据着大部分像素,对于场景理解必不可少,所以引入了这一任务. 不过目前这个任务还没有发布te ...
- Android IntentService 的使用
1.service 执行耗时任务的步骤 2.IntentService (1)介绍 (2)使用方法 (3)优点 (4)在AndroidManifest.xml文件中添加service设置 <se ...
- 【算法笔记】B1028 人口普查
1028 人口普查 (20 分) 某城镇进行人口普查,得到了全体居民的生日.现请你写个程序,找出镇上最年长和最年轻的人. 这里确保每个输入的日期都是合法的,但不一定是合理的——假设已知镇上没有超过 2 ...
- HDU - 5050 (大数二进制gcd)
It's time to fight the local despots and redistribute the land. There is a rectangular piece of land ...
- tensorflow基础-placeholder
placeholder: 要给节点输入数据时用 placeholder,在 TensorFlow 中用placeholder 来描述等待输入的节点,只需要指定类型即可,然后在执行节点的时候用一个字典来 ...
- drf序列化器的实例
应用目录结构: views.py from django.shortcuts import render # Create your views here. from django.views imp ...
- python爬虫之User-Agent用户信息
python爬虫之User-Agent用户信息 爬虫是自动的爬取网站信息,实质上我们也只是一段代码,并不是真正的浏览器用户,加上User-Agent(用户代理,简称UA)信息,只是让我们伪装成一个浏览 ...
- 2019.3.25 SQL语句(进阶2)
子查询 数据库中的表沿用 上一篇博客 中使用的Employee1. 练习: 1.求所有年龄比张三小的人 select * from Employee1 where age < (select a ...