如何angular过滤器进行排序???
2024-08-31 00:16:32
首先定义一个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
这样就完成了一个简单的排序,希望能帮到大家!!!!!!!!
最新文章
- ASP.NET Identity 2新增双重认证、帐号锁定、防伪印章功能并修复了一些bug
- (转)Tomcat数据源连接池加密
- js②
- java加密解密的学习
- Struts2(十三)国际化-internationalization
- 第十二章 管理类型(In .net4.5) 之 操作字符串
- Linux imagemagic(转载)
- 重学《C#高级编程》(对象与类型)
- 第一章:JavaScript简介
- Error creating bean with name &#39;signController&#39;: Injection of autowired dependencies failed
- hihoCoder #1094 : Lost in the City(枚举,微软苏州校招笔试 12月27日 )
- Ubuntu 搭建 GlusterFS 过程笔记
- 使用.net core efcore根据数据库结构自动生成实体类
- vue drag 对表格的列进行拖动排序
- Centos系统快速添加yum源
- 浏览器内核 Trident Gecko Presto Webkit
- python基础之Day6
- android 布局文件中xmlns:android=";http://schemas.android.com/apk/res/android";
- Shiro笔记(三)授权
- [Android] 仿照 Last App Switcher 写的小程序
热门文章
- [ADB Shell]Android Debug Bridge常用命令
- Reviewing notes 2.1 of Mathematical analysis
- 启动storm集群及配置
- sqlalchemy orm数据类型验证方法比较
- python 连接数据库 pymysql模块的使用
- RNA-seq分析htseq-count的使用
- C++_标准模板库STL概念介绍1-建立感性认知
- 洛谷 P2518 [HAOI2010]计数 (组合数)
- c# 动态生成继承类并实现序列化特性
- asp.net mvc 静态化