如何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 ...
随机推荐
- go的三个常用命令go run go build go install
go的三个常用命令 go run go build go install 命令源码文件:含有 main函数 的文件 库源码文件:不包含 main函数 的文件, 主要用于编译成静态文件.a供其他包调用 ...
- Vue-think脚手架
准备重构的项目,原来的后台是thinkPHP写的,刚刚摸VUE,不知道里面数据调用原理,想先安装vuethink学习一下. 结果安装半天,npm run dev的时候报错,尝试了很多方法,各种重装,看 ...
- Ubuntu16.04安装openBLAS
基本步骤: git clone git://github.com/xianyi/OpenBLAS cd OpenBLAS sudo apt-get install gfortran sudo make ...
- Svn安装成功后的操作
一.服务器端创建目录 在Svn服务器端创建一个用来保存客户端提交文件的文件夹 (我的路径是d:/Svn/App/book) 首先将Svn的服务端安装目录/bin 进行环境配置,以下操作是在进行环境配置 ...
- 用IDM下载博客图片
前言 写博客的人一定都会有一个图床,将图片存在那里.发现自己以前没有注意图片来源问题,随手就贴在博客上面了.现在有不少图片都挂了,换句话来说有可能自己目前用的图床不提供服务了,那所有的图片都有可能丢失 ...
- 基于JsonPath和XmlPath的对象映射(Object Mapping)
rest-assured支持映射Java对象到Json和XML以及从Json和XML中映射到Java对象.Json映射需要在classpath 中有Jackson.Jackson 2或者是Gson,X ...
- ul模拟select,位置,数据,是否可输入及输入提示效果都可作为参数直接传入
转发请注明出处,虽然转发几率不大... HTML <span class="theContainer"></span> CSS body {padding: ...
- WordPress 设置GeoIP数据库目录权限时错误解决方案
存在一个问题 更新完WP-statistics后,不知道为什么出现了一个错误提示:设置GeoIP数据库目录权限时错误,请确保您的Web服务器有权限写入到目录/var/www/html/wordpres ...
- 109th LeetCode Weekly Contest Knight Dialer
A chess knight can move as indicated in the chess diagram below: . This time, we place o ...
- 【记录】dvwa总结
一.Brute Force 选择集束炸弹 设置payload stack attck 防御:密码加密,使用验证码,使用统一的参数代替帐号和密码. 二.Command Injection |,||,&a ...