说点小案例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. KMP算法再解 （看毛片算法真是人如其名，哦不，法如其名。）

    KMP算法主要解决字符串匹配问题,其中失配数组next很关键: 看毛片算法真是人如其名,哦不,法如其名. 看了这篇博客,转载过来看一波: 原博客地址:https://blog.csdn.net/sta ...

  2. 48.rocketMQ

    一.简介 RocketMQ是阿里旗下的一款产品,分为开源版本和非开源版本.相比于ActiveMQ,RocketMQ支持顺序消费.事务机制.失败重试机制.消息可查询.消息订阅.较强的水平扩展能力.亿级堆 ...

  3. OI中一些常见实用的套路【更新中】

    数据结构 在维护树上路径时,如果只是点的独立的加减,可以考虑用括号序来维护(拆成两部分) 需要求树上很多路径中k近/距离和 一类,考虑点分治/在点分树上解决. 子树求和可以转化为DFS序上区间求和 树 ...

  4. 20190416 OSX系统使用VMware Fusion安装CentOS7踩的那些坑

    一.创建虚拟机 (1)在虚拟机资源库中点击[+添加]按钮,选择“新建...”选项 (2)选择创建自定义虚拟机 (3)选择系统类型为CentOS (4)选择虚拟磁盘类型 (5)选择虚拟机存储位置:点击[ ...

  5. Kali/Ubuntu无法和物理机之间复制粘贴解决办法

    Vmware安装Linux,传统的vmtools已经被抛弃,当前建议使用Open-VM-tools 安装Open-VM-tools//Kali,Ubuntu: sudo apt install Ope ...

  6. maven工程下testng简单使用

    创建maven工程后,将Repository仓库中maven代码粘贴复制到pom.xml文件中,仓库地址:<!-- https://mvnrepository.com/artifact/org. ...

  7. c#Task类。实现异步的一种方式

    Task和Task<TResult>是c#提供的一种实现异步功能的2个类.Task<TResult>继承Task类,有返回参数. 1.基本用法 不嵌套利用静态方法创建和运行任务 ...

  8. Android:刚6瓶啤酒4两56度白酒下肚,居然20分钟做了一手机版网站 !

    刚6瓶啤酒4两56度白酒下肚,居然20分钟不到时间做了一手机版网站 !人有多大潜力你知道吗? 大家有兴趣的可以用手机或微信打开 http://xh.yunxunmi.com/  看看俺这酒后之做! 更 ...

  9. Jmeter创建WebService 测试计划

    构建 WebService 测试计划 在本章节,你将学习如何创建一个 测试计划 去测试 WebService.先创建5个用户请求同一个页面,同时每个请求重复2次,因此总数为(5个用户)X(1次请求)X ...

  10. JavaScript设计模式-14.组合模式实现

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...