轻松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. ...
随机推荐
- 字符型SQL注入
字符型SQL注入 很早就基于DVWA实现了字符型的SQL注入,但是一直感觉自己没有理解的特别清楚,这次又看了一下网上的一些讲解,试着总结一下.以下是我的一写浅薄见解,请大家批判着看. 基本原理 看 ...
- lightoj1336数论基础
#include<iostream> #include<cstdio> #include<cmath> #define ll long long using nam ...
- Windows10 图标重建
Windows10 图标重建 有没有遇到电脑上某个图标成了黑块,白块或者没有图呢. 那这样的话就可以使用图标重建啦. 删掉Windows10的图标文件如下图 路径: %userprofile%\App ...
- unity还原three导出的json——基本模型,位移,旋转,缩放
GameObject.CreatePrimitive(PrimitiveType.Cube); GameObject.CreatePrimitive(PrimitiveType.Plane); Gam ...
- 【vue系列之一】使用vue脚手架工具搭建vue-webpack项目
对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一 ...
- python基本语法-函数与异常
# -*- coding: utf-8 -*- #自定义函数 ''' def functionname( parameters ): "函数_文档字符串" function_sui ...
- 在Centos7 更改Docker默认镜像和容器的位置
图片出处:https://bobcares.com/wp-content/uploads/docker-change-directory.jpg 一.Why? 通常,当你开始使用docker时,我们并 ...
- fir.im 持续集成技术实践
互联网时代,人人都在追求产品的快速响应.快速迭代和快速验证.不论是创业团队还是大中型企业,都在探索属于自己的敏捷开发.持续交付之道.fir.im 团队也在全面实施敏捷,并推出新持续集成服务 - flo ...
- SQL SERVER大话存储结构(3)_数据行的行结构
一行数据是如何来存储的呢? 变长列与定长列,NULL与NOT NULL,实际是如何整理存放到 8k的数据页上呢? 对表格进行增减列,修改长度,添加默认值等DDL SQL ...
- 【JAVAWEB学习笔记】12_Http&Tomcat
一.Http协议 1.什么是Http协议 HTTP,超文本传输协议(HyperText Transfer Protocol)是互联网上应用最为广泛的 一种网络协议.所有的WWW文件都必须遵守这 ...