首先，先上代码

<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实现二分图的最大权匹配

    1 问题描述 何为二分图的最大权匹配问题? 最大权二分匹配问题就是给二分图的每条边一个权值,选择若干不相交的边,得到的总权值最大. 2 解决方案 解决这个问题可以用KM算法.理解KM算法需要首先理解& ...

  2. python—socket编程

    一:客户端/服务器 架构 1.硬件C/S架构:(例如,打印机) 2.软件C/S架构:互联网中处处是C/S架构 腾讯作为服务端为你提供视频,你得下个腾讯视频客户端才能看它的视频 C/S架构与socket ...

  3. 源码分析（4）-ConcurrentHashMap（JDK1.8）

    一.UML类图 ConcurrentHashMap键值不能为null:底层数据结构是数组+链表/红黑二叉树:采用CAS(比较并交换)和synchronized来保证并发安全. CAS文章:https: ...

  4. 什么？你还不会身份证号码验证？最全的身份证正则验证js

    话不多说上代码 //身份证号合法性验证 //支持15位和18位身份证号 //支持地址编码.出生日期.校验位验证 function cidInfo(code) { var city={11:" ...

  5. C#9.0 终于来了，您还学的动吗？ 带上VS一起解读吧！（应该是全网第一篇）

    一:背景 1. 讲故事 好消息,.NET 5.0 终于在2020年6月10日发布了第五个预览版,眼尖的同学一定看到了在这个版本中终于支持了 C# 9.0,此处有掌声,太好了!!! .Net5官方链接 ...

  6. @atcoder - AGC003F@ Fraction of Fractal

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个 H*W 黑白格图,保证黑格四连通. 定义分形如下:0 ...

  7. Mac搭建Fluter应用环境

    1.创建一个路径.例如我创建是: /Users/chenghui/ 然后创建一个文件夹: development 把下载好的Fluter 解压到当前目录下: development /Users/ch ...

  8. IP地址和端口

    IP地址是网络中计算机的唯一标识.没有IP地址,计算机无法接入互联网. IPv4地址32bit,用点分十进制表示,如202.38.64.3 IPv6地址128bit,用冒号分割十六进制表示,如2001 ...

  9. 重学 Java 设计模式：实战代理模式「模拟mybatis-spring中定义DAO接口，使用代理类方式操作数据库原理实现场景」

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 难以跨越的瓶颈期,把你拿捏滴死死的! 编程开发学习过程中遇到的瓶颈期,往往是由于看不 ...

  10. Jmeter系列（21）- 详解 HTTP Request

    如果你想从头学习Jmeter,可以看看这个系列的文章哦 https://www.cnblogs.com/poloyy/category/1746599.html HTTP Request 介绍 用来发 ...