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实现表格按指定列排序的更多相关文章

  1. QRowTable表格控件-支持hover整行、checked整行、指定列排序等

    目录 一.开心一刻 二.嘴一嘴 三.效果展示 四.浅谈实现 五.自定义数据源 1.data函数 2.flags函数 六.自定义视图 1.目的 2.问题分析 七.测试 八.相关文章 原文链接:QRowT ...

  2. [转帖]linux Shell sort按照指定列排序

    linux Shell sort按照指定列排序 https://blog.csdn.net/weixin_38308151/article/details/80760133 kubectl get p ...

  3. PHP 距离我最近排序+二维数组按指定列排序

    思路: 1.获取我的位置,即:我的经纬度 2.各站点须有位置     即:排序对象有位置经纬度 3.查询要排序的站点列表 4.循环遍历计算  与我的距离 5.二维数组按 指定列(距离)排序 具体如下: ...

  4. Jtable 表格按多列排序(支持中文汉字排序)

    这两天公司让做一个Jtable表格的排序,首先按A列排序,在A列相等时按B列排序,B列相等时按C列排序,ABC三列可以任意指定,最多分三列,这样的一个需求.由于我是大神,所以必须做了出来.ok,不自恋 ...

  5. linux 中sort命令 按照指定列排序

    sort怎样按指定的列排序0000 27189 41925425065f 15 419254250663 7 419254250675 5 419254250691 76 419254250693 2 ...

  6. linux sort按照指定列排序

    sort怎样按指定的列排序0000 27189 41925425065f 15 419254250663 7 419254250675 5 419254250691 76 419254250693 2 ...

  7. 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。

    前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...

  8. oracle按照指定列排序操作

    按照...分组排序后,得到行编号: row_number() over(partition by ... order by ...) 按照...分组排序后,得到相应的列的第一个数据: first_va ...

  9. C# DataTable按指定列排序

    C#提供的内置对象DataTable功能特别的强大,如果我们需要对DataTable中的某一列进行排序怎么处理呢,具体代码如下: DataTable dt = new DataTable(); dt. ...

随机推荐

  1. vue的Virtual Dom实现- snabbdom解密

    vue在官方文档中提到与react的渲染性能对比中,因为其使用了snabbdom而有更优异的性能. JavaScript 开销直接与求算必要 DOM 操作的机制相关.尽管 Vue 和 React 都使 ...

  2. 微坑---微信小程序ios上时间字符串转换为时间戳时,在开发工具上和安卓手机上运行成功

    给定一个时间字符串  var time="2017-02-27 16:42:53" js有三种转换为时间戳的方法:1.var timestamp = Date.parse(time ...

  3. ThinkPHP 框架模型

     1 在MainController.class.php 控制器中有一个test的方法,同时还有一个deng的方法,我想在test方法中使用deng方法  表示为 <?php namespace ...

  4. silverlight WPF 水纹文本框

    silverlight3取消了watertextbox控件,只有自己实现了个,实现了和textbox一样的无差异使用,只需要设置defaulttext就可以了 using System; using ...

  5. Windows 随手笔记

    1.常见快捷方式 远程桌面 mstsc 注册表 regedit 组策略 gpedit.msc 2.Windows命令手册 ping命令 ping [-t] [-a] [-n count] [-l le ...

  6. 使用CSS和JQuery实现表格单元格内容超出时部分隐藏,隐藏部分以...显示

    1.使用CSS实现,给此单元格添加一个Class: width:130px; display:block; overflow:hidden; word-break:keep-all; white-sp ...

  7. 学习笔记:HTML+CSS 基础知识

    1.<q>标签,短文本引用       <q>引用文本</q> <q>标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行 ...

  8. 分享几个日常调试方法让js调试更简单

    下面分享几个日常调试代码的时候在Console命令行显示你的操作,让你的js调试更简单. console显示信息的命令 在浏览器按f12在console上显示你的文本. <!DOCTYPE ht ...

  9. HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态

    多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...

  10. 【JavaScript你需要知道的基础知识~】

    最近开始学习JavaScript,整理了一些相关的基础知识 JS注释方式:// 单行注释(Ctrl+/ )/* 段落注释(Ctrl+shift+/ )*/ [JavaScript基础]JavaScri ...