轻松Angularjs实现表格按指定列排序
angular表格点击序号进行升序,再次点击进行降序排序,在输入框输入信息,出现相对应数据的那一行。
html:
<input type="text" ng-model="search"/>
<table border="" cellpadding="" cellspacing="" width="400px">
<tr>
<th ng-click="click()">编号</th>
<th ng-click="click1()">姓名</th>
<th ng-click="click2()">年龄</th>
</tr>
<tr ng-repeat="item in data|orderBy:a+b+c|filter:search">
<td>{{item.number}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
js:
var app=angular.module('mk',[]);
app.controller('test',function($scope,$http){
$http.get('json.json').success(function(data){
$scope.data=data.nr
});
$scope.a='number';
$scope.b='name';
$scope.c='age';
$scope.click=function(){
if($scope.a=='number'){
$scope.a='-number';
$scope.b='';
$scope.c='';
}else{
$scope.a='number';
$scope.b='';
$scope.c='';
}
};
$scope.click1=function(){
if($scope.b=='name'){
$scope.a='';
$scope.b='-name';
$scope.c='';
}else{
$scope.a='';
$scope.b='name';
$scope.c='';
}
};
$scope.click2=function(){
if($scope.c=='age'){
$scope.a='';
$scope.b='';
$scope.c='-age';
}else{
$scope.a='';
$scope.b='';
$scope.c='age';
}
}
})
此方法还需引用json文件:
{
"nr":[
{"number":,"name":"Angular","age":},
{"number":,"name":"Blue","age":},
{"number":,"name":"Fertn","age":},
{"number":,"name":"Onfer","age":},
{"number":,"name":"Wang","age":},
{"number":,"name":"Linla","age":},
{"number":,"name":"San","age":},
{"number":,"name":"Ring","age":},
{"number":,"name":"Cone","age":},
{"number":,"name":"Perter","age":},
{"number":,"name":"Nert","age":},
{"number":,"name":"Ding","age":}
]
}
我是用过滤器 orderBy:'id':a+b+c来控制排序是升序还是降序,在点击时通过判断他们的来实现我们想要的效果。
你们还有什么简单方法么,拿出来分享一下吧!
轻松Angularjs实现表格按指定列排序的更多相关文章
- QRowTable表格控件-支持hover整行、checked整行、指定列排序等
目录 一.开心一刻 二.嘴一嘴 三.效果展示 四.浅谈实现 五.自定义数据源 1.data函数 2.flags函数 六.自定义视图 1.目的 2.问题分析 七.测试 八.相关文章 原文链接:QRowT ...
- [转帖]linux Shell sort按照指定列排序
linux Shell sort按照指定列排序 https://blog.csdn.net/weixin_38308151/article/details/80760133 kubectl get p ...
- PHP 距离我最近排序+二维数组按指定列排序
思路: 1.获取我的位置,即:我的经纬度 2.各站点须有位置 即:排序对象有位置经纬度 3.查询要排序的站点列表 4.循环遍历计算 与我的距离 5.二维数组按 指定列(距离)排序 具体如下: ...
- Jtable 表格按多列排序(支持中文汉字排序)
这两天公司让做一个Jtable表格的排序,首先按A列排序,在A列相等时按B列排序,B列相等时按C列排序,ABC三列可以任意指定,最多分三列,这样的一个需求.由于我是大神,所以必须做了出来.ok,不自恋 ...
- linux 中sort命令 按照指定列排序
sort怎样按指定的列排序0000 27189 41925425065f 15 419254250663 7 419254250675 5 419254250691 76 419254250693 2 ...
- linux sort按照指定列排序
sort怎样按指定的列排序0000 27189 41925425065f 15 419254250663 7 419254250675 5 419254250691 76 419254250693 2 ...
- 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。
前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...
- oracle按照指定列排序操作
按照...分组排序后,得到行编号: row_number() over(partition by ... order by ...) 按照...分组排序后,得到相应的列的第一个数据: first_va ...
- C# DataTable按指定列排序
C#提供的内置对象DataTable功能特别的强大,如果我们需要对DataTable中的某一列进行排序怎么处理呢,具体代码如下: DataTable dt = new DataTable(); dt. ...
随机推荐
- Kafka 源码剖析
1.概述 在对Kafka使用层面掌握后,进一步提升分析其源码是极有必要的.纵观Kafka源码工程结构,不算太复杂,代码量也不算大.分析研究其实现细节难度不算太大.今天笔者给大家分析的是其核心处理模块, ...
- C返回函数指针的函数
如下函数 char (*retCharWithInt(char, char))(int); 申明了函数指针retCharWithInt,该指针指向一个形参是(char,char),返回值是char(* ...
- 我对Stub和Mock的理解
介绍 使用测试驱动开发大半年了,我还是对Stub和Mock的认识比较模糊,没有进行系统整理. 今天查阅了相关资料,觉得写得很不错,所以我试图在博文中对资料进行整理一下,再加上一些自己的观点. 本文是目 ...
- Homebrew安装和使用
## homebrew使用1. 安装 `$ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/m ...
- 027 hibernate查询语言(HQL)
概述:数据查询与检索是Hibernate中的一个亮点,相对其他ORM实现而言,Hibernate提供了灵活多样的查询机制. 标准化对象查询(Criteria Query):以对象的方式进行查询,将查询 ...
- [问题贴]mui.openWindow+自定义事件监听操作让alert()执行两次
仔细看,Alert函数执行了两次 共两个页面:index.html和detail.html, detail.html为按钮设置了自定义事件监听(newsId),触发alert. 在index.html ...
- R formulas in Spark and un-nesting data in SparklyR: Nice and handy!
Intro In an earlier post I talked about Spark and sparklyR and did some experiments. At my work here ...
- Identity Service - 解析微软微服务架构eShopOnContainers(二)
接上一篇,众所周知一个网站的用户登录是非常重要,一站式的登录(SSO)也成了大家讨论的热点.微软在这个Demo中,把登录单独拉了出来,形成了一个Service,用户的注册.登录.找回密码等都在其中进行 ...
- 你对SpringMvc是如何理解的?
SpringMVC工作原理 SpringMvc是基于过滤器对servlet进行了封装的一个框架,我们使用的时候就是在web.xml文件中配置DispatcherServlet类:SpringMvc工作 ...
- TCP:三次握手、四次握手、backlog及其他
TCP是什么 首先看一下OSI七层模型: 然后数据从应用层发下来,会在每一层都加上头部信息进行封装,然后再发送到数据接收端,这个基本的流程中每个数据都会经过数据的封装和解封的过程,流程如下图所示: 在 ...