轻松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. ...
随机推荐
- iOS APP打包分发给远程的手机测试
APP要打包给远程的朋友或客户测试,但又不是企业账号的情况下,我们只能根据手机的udid进行描述证书的配置,再打包分发给提供了udid的手机进行安装 一.如何得到udid? 手机连接到mac电脑,打开 ...
- 【Windows 10 应用开发】跟随系统主题颜色
有些时候,希望应用程序中的某些颜色可以与系统的主题颜色相同,并且当系统主题色改变时进行同步. 实现过程并不复杂,主要用到 UISettings 类,它公开一个 GetColorValue 方法,访问这 ...
- [原创]ssget过滤动态块的方式
Autocad在2006增加了新的动态块功能,方便了对块的动态修改,但是修改动态块后,块名会变成一个匿名块,导致无法通过块名来快速过滤. 明经论坛上有人通过全选块后再来遍历筛选,我通过研究简化了这个问 ...
- URL Scheme与openURL
URL Schemes URL Schemes是苹果给出的用来跳转到系统应用或者跳转到别人的应用的一种机制.同时还可以在应用之间传数据. 设置一个URL Schemes:选中App工程->Inf ...
- routeProvider路由的使用
先创建一个主程序文件index.html,内容如下: <!DOCTYPE html> <html ng-app="myApp"> <head> ...
- Maven工具的介绍,配置及使用
--------均是在Windows操作系统下,不是之前的Linux操作系统------- 1.Maven的介绍 Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的 ...
- 一步步学习EF Core(2.事务与日志)
前言 上节我们留了一个问题,为什么EF Core中,我们加载班级,数据并不会出来 其实答案很简单,~ 因为在EF Core1.1.2 中我们在EF6.0+中用到的的延迟加载功能并没有被加入,不过在EF ...
- php 关于经纬度距离计算方法 成功版
1.PHP实现通过经纬度计算距离 单位为公里 function getdistance($lng1,$lat1,$lng2,$lat2)//根据经纬度计算距离 { //将角度转为狐度 $radLat ...
- hive的表的基本操作
环境简介 实验环境使用的是cloudera-quickstart-vm-5.0环境. 内容摘要 创建表 修改表名 修改表中的列名 添加列 删除列 替换列 正文 Alter Table 语句 上面所述的 ...
- JS代码整洁随笔
// 之前都是这么写:使用undefined和null来检测一个属性是否存在 if (obj['name'] !== undefined) { console.log('name属性存在'); // ...