说点小案例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. CentOS 7 安装程序介绍

    (一).引导菜单 使用 UEFI 引导 Install CentOS Linux 7 选择此选项开始在你的计算机系统中使用图形安装程序安装 CentOS 7 Test this media & ...

  2. 判断IE浏览器的版本号

    function IEVersion() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isIE = userAgen ...

  3. （JAVA作业）练习：创建一个类名为Fruit;包含实例变量：水果名称，颜色，价格，上市月份，有无种子 10个实例：苹果，香蕉，芭乐，柚子，李子，杨桃，猕猴桃，哈密瓜，葡萄，榴莲； 实现功能：提示用户输入水果品种编号，输出该水果的全部信息。

    class Lei { String name; String color; int price; int date; int num; String zz; void assemble(){ Sys ...

  4. Windows开发经验 - Visual Studio 2017

    1. 调试子进程 Visual Studio 2017及更早的版本原生不支持调试子进程,不确定未来是否会支持.可以通过官方插件让Visual Studio能够调试子进程. https://market ...

  5. 如何对react进行性能优化

    React本身就非常关注性能,其提供的虚拟DOM搭配上DIff算法,实现对DOM操作最小粒度的改变也是非常高效的,然而其组件的渲染机制,也决定了在对组件更新时还可以进行更细致的优化.  react组件 ...

  6. Java学习之路(五)：常见的对象操作

    Object对象 我们先来介绍一下API API(Application Programming Interface):应用程序编程接口 Java API 就是Java提供给我们使用的类,这些类将底层 ...

  7. Linux 下使用yum 命令安装MySQL

    Linux下使用yum安装MySQL,以及启动.登录和远程访问MySQL数据库. 1.yum安装mysql 1. 查看有没有安装包:   yum list mysql*    #移除已经安装的mysq ...

  8. 微服务Kong（二）——快速入门

    在本节中,您将学习如何管理您的KONG实例.首先,我们将指导您如何启动Kong,以便您能访问KONG的RESTful形式的管理界面,您可以通过它来管理您的API,consumers等.通过管理型API ...

  9. Http的Get和Post--扫盲篇

    Http Get请求,根据Http规范Get用于服务器信息的获取,而且安全及幂等的.其中安全的在此处的含义是:不会对服务器数据造成修改.增加.以及数据状态的改变. Http Post请求,表示可能修改 ...

  10. MYSQL数据库的参数文件

    参数文件:告诉MySQL实例启动时在哪里可以找到数据库文件,并且指定某些初始化参数,这些参数定义了某种内存结构的大小等设置,还会介绍各种参数的类型. 参数文件 当MySQL实例启动时,MySQL会先去 ...