说点小案例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. linux常见编辑命令

    保存命令 按ESC键 跳到命令模式,然后: :w 保存文件但不退出vi :w file 将修改另外保存到file中,不退出vi :w! 强制保存,不推出vi :wq 保存文件并退出vi :wq! 强制 ...

  2. Hibernate 查询数据库中的数据

    1.Criteria介绍 Criteria与Session绑定,其生命周期跟随着Session结束而结束,使用Criteria时进行查询时,每次都要于执行时期动态建立物件,并加入各种查询条件,随着Se ...

  3. markdown页面内跳转

    分两步 第一步 实际语法比较简单,在需要跳转的位置添加锚点,语法如下: <span id="jump">跳转到的地方</span> 第二步 在需要点击跳转的 ...

  4. error occurred during initialization of vm

    虚拟机无法进行如下分配 : -Xmx2048m -XX:MaxPermSize=512m 原因是我的老爷机总共内存只有3G: settings - > 搜索VM ->找到Compiler ...

  5. springcloud(五)-Ribbon

    前言 先发句牢骚,最近太TM忙了,一直没时间静下心来继续写微服务架构!EMMMMMM..... 经过前文的讲解,我们已经实现了微服务的注册与发现.启动各个微服务时,Eureka Client会把自己的 ...

  6. curl 命令大全

    post json curl -H "Content-Type: application/json" -X POST --data '{"userID":100 ...

  7. kubernetes pod termination pending

    在将k8s从1.7.9 升级到1.10.2 之后,发现删除pod一直处于terminating状态, 调查发现删不掉的pod都有一个特点就是pod yaml中command部分写错了,如下所示: ap ...

  8. 【Markdown】Markdown相关问题

    1.显示多行代码 将代码用一个tab缩进或者四个空格缩进

  9. Memcahe安装与配置

    1.先启动Memcahe服务 (1)通过Memcahe文件夹下的memcahe.exe程序启动 (2)将Memcahe加到Windows服务中去 为了方便使用,大多数情况下,是使用第二种方式,来启动M ...

  10. vs2013 调试libevent 源码

    自己内功的提升,无非是向前辈学习和修炼自身,对于编码也是如此,学习优秀的库只有从 源代码学起,才能深刻理解库实现的来龙去脉,加深自己的理解,提升自己的功力. 今天就介绍一下vs2013 下面调试lib ...