AngularJS表格排序
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible"content="IE=edge" />
<meta name="viewport"content="width=device-width,initial-scale=1" />
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet"href="bootstrap-3.3.6-dist/css/bootstrap.min.css" />
<style>
table td {
border:solid 1px grey;
border-collapse:collapse;
padding:10px;
}
table tr:nth-child(odd) {
background-color:#f1f1f1;
}
table tr:nth-child(even) {
background-color:#ffffff;
}
</style>
</head>
<body>
<div class="container"style="padding:50px">
<div data-ng-app="myApp"data-ng-controller="myCtrl">
<table>
<tr data-ng-repeat="x in names | orderBy:'liaohao'">
<td>{{x.liaohao}}</td><td>{{x.xinghao}}</td>
</tr>
</table>
</div>
</div>
<script src="jQuery/jquery-2.1.4.min.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
angular.module("myApp", []).controller("myCtrl", function ($scope, $http) { $http.get("json/json.json").success(function (response) { $scope.names=response.records}) })
</script>
</body>
</html>
AngularJS表格排序的更多相关文章
- 【09】AngularJS 表格
AngularJS 表格 ng-repeat 指令可以完美的显示表格. 在表格中显示数据 使用 angular 显示表格是非常简单的: <div ng-app="myApp" ...
- JS实现表格排序
今天有点闲,写个小东西,使用JS实现点击表格标题栏实现自动排序功能,嘻嘻... 一.JS代码,文件名为code.js如下: (function($){ //插件 $.extend($,{ //命名空间 ...
- jQuery 表格排序插件 Tablesorter 使用
jQuery 表格排序插件 Tablesorter 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面): <script src="lib/jquery-1.8.3.m ...
- JS表格排序
var employees = [] employees[0] = { name: "George", age: 32, retiredate: "March 12, 2 ...
- JavaScript写一个表格排序类
依稀记得那是上个星期六的下午,我参加了网易暑期实习生招聘笔试.考得相当糟糕,编程题3个题通过了2个,简答题没做对,选择题貌似是20个题猜了6-7个,99%是挂了,唉唉唉!生活不只眼前的苟且,学习的脚步 ...
- 案例学习总结：原生JS实现表格排序
最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点: call方法使用 sort方法 ...
- ajax json 表格排序，分页，自己定义每页数量
ajax json 表格排序.分页,自己定义每页数量 点击表头能够排序.依照升序或者降序,另外支持多列排序 设置每页数量 演示 XML/HTML Code <table id='examp ...
- javascript 表格排序和表头浮动效果(扩展SortTable)
前段时间一个项目有大量页面用到表格排序和表头浮动的效果,在网上找了几个表格排序的js代码,最后选择了 Stuart Langridge的SortTable,在SortTable基础上做了些扩展,加上了 ...
- jQuery html表格排序插件：tablesorter
ablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQ ...
随机推荐
- GIT远程仓库的使用
查看当前项目有哪些远程仓库 $ git remote bixiaopeng@bixiaopengtekiMacBook-Pro wirelessqa$ git remote origin 查看远程仓库 ...
- matlab矩阵中如何去掉重复的行；如何找到相同的行，并找到其位置
找到了2个函数:unique和ismember 1. 去掉其中的重复行:unique 例子: IDX = [,,; ,,; ,,; ,,; ,,; ,,]; classNo = unique(IDX, ...
- 坐标深圳 | Kubernetes！我要用这样的姿势拥抱你
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 从去年至今,容器.Kubernetes话题的热度就持续不减,有人说基于容器 +Kubernetes 的新型 PaaS 将会成为云计算的主流: ...
- Jvav Collection-List
package 集合; import java.util.ArrayList; import java.util.Collection; /** * 集合和数组的区别: * 1.长度 * 数组长度固定 ...
- Java线程中断的本质深入理解
Java的中断是一种协作机制.也就是说调用线程对象的interrupt方法并不一定就中断了正在运行的线程,它只是要求线程自己在合适的时机中断自己. 一.Java中断的现象 首先,看看Thread类里的 ...
- [转]微信小程序，开发大起底
本文转自:http://blog.csdn.net/baiyuzhong2012/article/details/54378497 作者简介:张智超,北京微函工坊开发工程师,CSDN微信开发知识库特邀 ...
- JavaScript数据类型 数据转换
JavaScript数据类型分为两种:原始类型和对象类型,原始类型有:number(数字).string(文本).boolean(布尔值).null(空).undefined(未定义):对象类型有:A ...
- DW网页制作，数学，数据库管理
数学(函数关系的建立) 函数关系:确定性现象之间的关系常常表现为函数关系,即一种现象的数量确定以后,另一种现象的数量也随之完全确定,表现为一种严格的函数关系. 如:记为y=f(x),其中x称为自变量, ...
- Java开发中代码规范有哪些？
Java开发中所要遵守的编码规范大体上有如下7点.命名规范.注释规范.缩进排版规范.文件名规范.声明规范.语句规范以及编程规范. 1.命名规范 (1)所有的标示符都只能用ASCⅡ字母(A-Z或a-z) ...
- SharePoint 2013 - Add-ins
1. App Web & Host Web The special website to which the app is deployed is called an App Web. The ...