说点小案例angular的排序

<!DOCTYPE html>

<html ng-app="mk">

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			*{

				margin: 0px;

				padding: 0px;

			}

			nav{

				text-align: center;

			}

			nav>*{

				vertical-align: top;

			}

			table{

				width: 100%;

				text-align: center;

			}

			table th,td{

				background: #A9A9A9;

				line-height: 30px;

			}

		</style>

	</head>

	<body>

		<div ng-controller="text">

			<nav>

				<select ng-model="a"> <!-- 这也是表单也有数据，她可以获取value值，这几个值代表你循环进来的每项key名 -->

					<option value="num">按编号排序</option>

					<option value="name">按姓名排序</option>

					<option value="age">按年龄排序</option>

				</select>

				<select ng-model="b">  <!-- 也同样获取value值，当为负的时候，是倒序，正序 -->

					<option value="">升序</option>

					<option value="-">降序</option>

				</select>

				<input type="text" ng-model="s"/>

			</nav>

			<table border="0px" id="table">

				<tr>

					<th>编号</th>

					<th>姓名</th>

					<th>年龄</th>

				</tr>

				<tr ng-repeat="value in data | orderBy:b+a | filter:s"> <!-- 过滤器过滤以下数据 b+a这样就字符串拼接到了一起。这样数据改变就进行了排序 -->

					<td>{{value.num}}</td>

					<td>{{value.name}}</td>

					<td>{{value.age}}</td>

				</tr>

			</table>

		</div>

		<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">

			var app=angular.module("mk",[]);

			app.controller("text",function($scope,$http){

				$http.get("paixu.json").success(function(data){

					$scope.data=data.xinxi

					$scope.a="num";

				})

			});

		</script>

	</body>

</html>

　　

angular排序的更多相关文章

  1. 【Angular】排序

    Correct way to integrate Jquery plugins in Angular.js gaurav123337/AngularOtherJqueryPluginDemo 超强的拖 ...

  2. 如何angular过滤器进行排序？？？

    首先定义一个json文件: 然后写HTML文件: <div id="box"> <!--第一个下拉框--> <select ng-model=&quo ...

  3. angular入门--列表排序

    首先,先上代码 <html ng-app="app1"> <head> <meta charset='utf-8' /> <meta na ...

  4. angular 过滤排序

    <table class="table"> <thead> <tr> <th ng-click="changeOrder('id ...

  5. 数组中包含多个对象 按照对象中的时间进行排序 适用与Angular.js、Jquery、微信小程序等

         LiveList.sort(this.compare('StartDate'))   //StartData:需要排序的时间   compare: function (property) { ...

  6. 前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...

  7. angular的$filter服务

    首先,介绍下$filter服务: 1.$filter是用来进行数据格式化的专用服务: 2.AngularJS内置了currency.date.filter.json.limitTo.lowercase ...

  8. Asp.Net MVC 分页、检索、排序整体实现

    很多时候需要这样的功能,对表格进行分页.排序和检索.这个有很多实现的方式,有现成的表格控件.用前端的mvvm,用户控件.但很多时候看着很漂亮的东西你想进一步控制的时候却不那么如意.这里自己实现一次,功 ...

  9. (翻译)Angular.js为什么如此火呢？

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

随机推荐

  1. SQL Server——存储过程（Stored Procedure）、事物、触发器

    存储过程(proc 或 procedure) 存储过程(Stored Procedure),计算机用语,是一组为了完成特定功能的SQL语句集,是利用SQL Server所提供的Transact-SQL ...

  2. [温故]图解java多线程设计模式（二）

    join & interrupt 这俩方法属于线程对象里的方法,属于线程本身的操作. join方法 用于等待一个线程的终止,等待期间将会阻塞,直到被等待的线程终止结束. 所以join可以用来做 ...

  3. 关于莫比乌斯函数的塞 ： 莫比乌斯前n项和 ， 莫比乌斯函数绝对值的前n项和

    https://ac.nowcoder.com/acm/contest/874#submit/{%22problemIdFilter%22%3A25455%2C%22statusTypeFilter% ...

  4. dubbo和zookeeper的关系

    转载前言:网络上很多教程没有描述zookeeper和dubbo到底是什么关系.分别扮演了什么角色等信息,都是说一些似是而非的话,这里终于找到一篇文章,比较生动地描述了注册中心和微服务框架之间的关系,以 ...

  5. 【JSP】jsp报错：Syntax error, insert "}" to complete MethodBody

    使用MyEclipse编写JSP的时候有时会报错误如下 Syntax error, insert "}" to complete MethodBody 大体意思就是说方法体缺少缺少 ...

  6. Python爬虫学习：Python内置的爬虫模块urllib库

    urllib库 urllib库是Python中一个最基本的网络请求的库.它可以模拟浏览器的行为发送请求(都是这样),从而获取返回的数据 urllib.request 在Python3的urllib库当 ...

  7. 《Algorithms算法》笔记：元素排序(4)——凸包问题

    <Algorithms算法>笔记:元素排序(4)——凸包问题 Algorithms算法笔记元素排序4凸包问题 凸包问题 凸包问题的应用 凸包的几何性质 Graham 扫描算法 代码 凸包问 ...

  8. python-Event事件处理进程同步

    #!/usr/bin/python from multiprocessing import Process,Event import os,time def A(e): print "blo ...

  9. java当中的定时器

    对于开发游戏项目的同胞来说,Timer 这个东西肯定不会陌生,今天对以前自己经常使用的定时进行了一番小小的总结!没有写具体实现的原理,只是列举出了其中的四种比较常见的使用方法,相对而言,所以只要按照其 ...

  10. ASP.NET Core 中的配置

    目录 以键-值对的形式读取配置 多环境配置 读取结构化的配置数据 参考 .NET Core 定义配置的方式不同于之前 NET 版本,之前是依赖于 System.Configuration 的 app. ...