首先，先上代码

<html ng-app="app1">

  <head>

  <meta charset='utf-8' />

    <meta name="generator"

    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />

    <title>angularJs list</title>

	<script src="angular.min.js"></script>

  </head>

  <body ng-controller='ctrl1' >

  <input type='button' ng-click='sortByType("age")' id="btnSortByAge" value="Sort By Age" />  <input type='button' ng-click='sortByType("height")' id="btnSortByHeight" value="Sort By height" />

	<ol>

		<li ng-repeat="item in data | orderBy:sort:desc">

			<ul>

			<li>name:<span ng-bind="item.name"></span></li>

			<li> age:<span ng-bind="item.age"></span></li>

			<li> sex:<span ng-bind="item.sex"></span></li>

			<li> height:<span ng-bind="item.height"></span></li>

			<li> description:<span ng-bind="item.description"></span></li>

			</ul>

		</li>

	</ol>

	<script>

	var dataList=[{

		name:'mary',

		age:24,

		sex:'female',

		height:'170cm',

		description:'Hi,everyBody,Nice to meet you'

	},

	{

		name:'Jackey',

		age:28,

		sex:'male',

		height:'187cm',

		description:'Hi,all,Nice to meet you'

	},

	{

		name:'Leon',

		age:27,

		sex:'male',

		height:'180cm',

		description:'Hi,everyBody,I\'m from china'

	},

	{

		name:'Andy',

		age:42,

		sex:'male',

		height:'173cm',

		description:'Hi,everyBody,I\'m from Hong kong'

	}]

	var app=angular.module('app1',[]);

	app.controller('ctrl1',['$scope',function($scope){

		$scope.name="China";

		$scope.data=dataList;

		$scope.sort='age';

		$scope.desc=true;

		$scope.sortByType=function(type){

			$scope.sort=type;

			$scope.desc=!$scope.desc;

		}

	}])

	</script>

  </body>

</html>

列表绑定就不说了，上面的代码只需要换掉angularjs的路径就可以看效果了，此处主要讲如何进行列表排序

其实很简单，只需要在scope中定义一个这样的变量，然后改变该值就能根据改变后的字段进行排序了，另外升序降序也定义了一个desc的变量，true和false不断修改就行了

另外多字段排序，只需要把orderBy后面的条件作为数组就可以了，但是发现貌似没用，哪位大神看到了还麻烦帮忙更正

angular入门--列表排序的更多相关文章

  1. Angular入门笔记

    AngularJS(下面简称其为ng)是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足,其通过使用指令(directives)结构来扩展HTML词汇,使开发 ...

  2. angular入门

    angular入门 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...

  3. 【python cookbook】【数据结构与算法】13.通过公共键对字典列表排序

    问题:想根据一个或多个字典中的值来对列表排序 解决方案:利用operator模块中的itemgetter()函数对这类结构进行排序是非常简单的. # Sort a list of a dicts on ...

  4. Python的列表排序

    Python的列表排序 本文为转载,源地址为:http://blog.csdn.net/horin153/article/details/7076321 在 Python 中, 当需要对一个 list ...

  5. Python 列表排序方法reverse、sort、sorted详解

    python语言中的列表排序方法有三个:reverse反转/倒序排序.sort正序排序.sorted可以获取排序后的列表.在更高级列表排序中,后两中方法还可以加入条件参数进行排序. reverse() ...

  6. python 字典排序，列表排序详细

    在程序中使用字典进行数据信息统计时,由于字典是无序的所以打印字典时内容也是无序的.因此,为了使统计得到的结果更方便查看需要进行排序.Python中字典的排序分为按“键”排序和按“值”排序. 1.按“值 ...

  7. Linq EF 根据字符列表排序或List根据列表排序以及Linq查询类型转换

    //model.BBSCategoryIDList=>{10,23,12}或者{1,3,2} //model.BBSCategoryIDs=>1,3,2或者10,23,12 //SqlFu ...

  8. python 列表排序方法reverse、sort、sorted基础篇

    python语言中的列表排序方法有三个:reverse反转/倒序排序.sort正序排序.sorted可以获取排序后的列表.在更高级列表排序中,后两中方法还可以加入条件参数进行排序. reverse() ...

  9. angular入门一之环境安装及项目创建

    angular入门一之环境安装及项目创建 1.安装node.js 下载,安装,在终端测试安装是否成功:node -v(查看nodejs版本) npm -v(查看npm版本) 下载地址:https:// ...

随机推荐

  1. Java实现串的简单处理

    串的处理 在实际的开发工作中,对字符串的处理是最常见的编程任务.本题目即是要求程序对用户输入的串进行处理.具体规则如下: 把每个单词的首字母变为大写. 把数字与字母之间用下划线字符(_)分开,使得更清 ...

  2. java实现第五届蓝桥杯猜年龄

    猜年龄 题目描述 小明带两个妹妹参加元宵灯会.别人问她们多大了,她们调皮地说:"我们俩的年龄之积是年龄之和的6倍".小明又补充说:"她们可不是双胞胎,年龄差肯定也不超过8 ...

  3. centos 7 源码安装openssh

    环境:centos 7.1.1503 最小化安装 依赖包下载:  yum -y install lrzsz zlib-devel perl gcc pam-devel 1.安装openssl ,选用最 ...

  4. 欧几里得算法求最大公约数-《Algorithms Fourth Edition》第1章

    最大公约数(Greatest Common Divisor, GCD),是指2个或N个整数共有约数中最大的一个.a,b的最大公约数记为(a, b).相对应的是最小公倍数,记为[a, b]. 在求最大公 ...

  5. linux下gdb调试方法与技巧整理

    参考博客:  https://blog.csdn.net/niyaozuozuihao/article/details/91802994 1.运行命令run:简记为 r ,其作用是运行程序,当遇到断点 ...

  6. 120行代码打造.netcore生产力工具-小而美的后台异步组件

    相信绝大部分开发者都接触过用户注册的流程,通常情况下大概的流程如下所示: 接收用户提交注册信息 持久化注册信息(数据库+redis) 发送注册成功短信(邮件) 写操作日志(可选) 伪代码如下: pub ...

  7. Linux系统如何设置开机自动运行脚本？

    大家好,我是良许. 在工作中,我们经常有个需求,那就是在系统启动之后,自动启动某个脚本或服务.在 Windows 下,我们有很多方法可以设置开机启动,但在 Linux 系统下我们需要如何操作呢? Li ...

  8. redis 数据删除策略和逐出算法

    数据存储和有效期 在 redis 工作流程中,过期的数据并不需要马上就要执行删除操作.因为这些删不删除只是一种状态表示,可以异步的去处理,在不忙的时候去把这些不紧急的删除操作做了,从而保证 redis ...

  9. 在SpringMVC获取客户端传递的数据的方式

    在处理请求的方法中,加入相对应的形参,保证形参参数名和传递的数据的参数名保持一致,就能够自动赋值 value:当不满足赋值条件时,可以使用value属性,指定映射关系 required:设置形参是否必 ...

  10. 关于wifi营销的看过来

    亲测可用.对于一个开发者来说,终于如获至宝.详情联系qq2455994690.源码可二开.包括微信一键关注上网,手机验证码上网.