首先，先上代码

<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实现第七届蓝桥杯搭积木

    搭积木 题目描述 小明最近喜欢搭数字积木, 一共有10块积木,每个积木上有一个数字,0~9. 搭积木规则: 每个积木放到其它两个积木的上面,并且一定比下面的两个积木数字小. 最后搭成4层的金字塔形,必 ...

  2. java实现第五届蓝桥杯扑克序列

    扑克序列 AA223344,一共4对扑克牌.请你把它们排成一行. 要求:两个A中间有1张牌,两个2之间有2张牌,两个3之间有3张牌,两个4之间有4张牌. 4A3A2432, 2342A3A4 请填写出 ...

  3. Linux 独立服务管理

    RPM包安装在默认位置 /etc/init.d/:启动脚本位置 /etc/sysconfig/:初始化环境配置文件位置 /etc/:配置文件位置 /etc/xinetd.conf/:xinetd配置文 ...

  4. 曹工说JDK源码（1）--ConcurrentHashMap，扩容前大家同在一个哈希桶，为啥扩容后，你去新数组的高位，我只能去低位？

    如何计算,一对key/value应该放在哪个哈希桶 大家都知道,hashmap底层是数组+链表(不讨论红黑树的情况),其中,这个数组,我们一般叫做哈希桶,大家如果去看jdk的源码,会发现里面有一些变量 ...

  5. 注解实现SpringCache自定义失效时间

    注解实现SpringCache自定义失效时间 SpringCache是一个很方便的缓存框架,但是官方提供的缓存的配置只有全局的缓存失效时间,没有针对某个命名空间做配置,因为工作上业务的关系需要针对某一 ...

  6. PIP 更换国内安装源

    linux: 修改 ~/.pip/pip.conf (没有就创建一个), 内容如下: [global] index-url = https://pypi.tuna.tsinghua.edu.cn/si ...

  7. javascript 面向对象学习（一）——构造函数

    最近在学习设计模式,找了很多资料也没有看懂,看到怀疑智商,怀疑人生,思来想去还是把锅甩到基础不够扎实上.虽然原型继承.闭包.构造函数也都有学习过,但理解得不够透彻,影响到后续提高.这次重新开始学习,一 ...

  8. Dedecms 修改当前位置样式

    当前列表页间隔符样式修改 后台-->系统基本参数-->核心设置-->栏目位置的间隔符号 只有二级位置栏目时的间隔符去除 找到include文件中的typelink.class.php ...

  9. Nice Jquery Validator 方法

    .validator() .validator( options ) 描述:根据参数初始化验证,验证 jQuery 选中的表单 参数:{Object} options - 可选,参考配置选项 示例: ...

  10. Swift Core Data 图片存储与读取

    1.首先推出选择拍照还是相册的alert,代码如下: UIAlertController *alert = [UIAlertController alertControllerWithTitle:ni ...