轻松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. ...
随机推荐
- 浅谈JavaScript时间与正则表达式
时间函数:var box = new Date() 函数 Demo: alert(Date.parse('4/12/2007')); //返回的是一个毫秒数11763 ...
- 运算符重载 与 sort()
运算符重载与sort() 二话不说上代码: #include <iostream> #include <algorithm> using namespace std; stru ...
- Android NDK开发之从Java与C互调中详解JNI使用(一)
生活 这一个礼拜过得真的是苦不堪言,上周因为打球脚踝直接扭伤,肿的想猪蹄一样,然后休息几天消肿了,可以缓慢龟速的行走了,然而五一回来上班第一天,上班鞋子还能穿上,下班脚已插不进鞋子里面了,好吧,又肿回 ...
- OC—可变数组NSMutableArray
- HotSpot的算法实现
1.枚举根节点 可达性分析中从GC Roots节点找引用,可作为GC Roots的节点主要是全局性的引用与执行上下文中,如果要逐个检查引用,必然消耗时间.另外可达性分析对执行时间的敏感还体现在GC停顿 ...
- 高性能网站架构设计之缓存篇(1)- Redis C#客户端
一.什么 RedisREmote DIctionary Server,简称 Redis,是一个类似于Memcached的Key-Value存储系统.相比Memcached,它支持更丰富的数据结构,包括 ...
- centos手动配置IP和DNS
手动设置ip地址 如果虚拟机不能自动获取IP,只能手动配置,配置方法如下: 输入命令 #vi /etc/sysconfig/network-scripts/ifcfg-eth0 [编辑网卡的配置文件] ...
- VR全景智慧城市
随着虚拟现实产业的发展,我国对虚拟现实产业也越来越重视了.我国虚拟现实VR市场增长速度很快,市场活跃性很高,很多人都看好我国的虚拟现实VR市场,而且未来国内虚拟现实VR市场的销量还将有更大的增长.据赛 ...
- Unity中提升像素字体清晰度
操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Unity5.6.0f3 Unity UI系统是非常好的,但默认情况下,使用像像素艺术风格游戏那样需要非常锋利的边框的字体 ...
- 【LR11】Error -27796: Failed to connect to server"server:port": [10060] Connection timed out错误解决办法
场景描述:被测系统是发布在远程服务器上的,假设IP是10.10.10.10,端口是8066,那么访问地址是http://10.10.10.10:8066/,在control机器上我设置了IP欺骗. ...