首先，先上代码

<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实现第五届蓝桥杯等额本金

    等额本金 题目描述 小明从银行贷款3万元.约定分24个月,以等额本金方式还款. 这种还款方式就是把贷款额度等分到24个月.每个月除了要还固定的本金外,还要还贷款余额在一个月中产生的利息. 假设月利率是 ...

  2. 【Jquery】判断宽度跳转

    $(window).resize(function(){ var wWidth = screen.width; if( wWidth < 788 ){ window.location.href= ...

  3. lambda表达式操作DataTable

    using System;using System.Collections.Generic;using System.Data;using System.Linq;using System.Text; ...

  4. effictive c++

    c++条款 num 1:尽量以const enum inline替换#define 1)对于单纯常量,最好以const对象或enums替换#defines 2)对于形似函数的宏,最好改用inline函 ...

  5. 基于Azure IoT开发.NET物联网应用系列-全新的Azure IoT架构

    物联网技术已经火了很多年了,业界各大厂商都有各自成熟的解决方案.我们公司主要搞新能源汽车充电,充电桩就是物联网技术的最大应用,车联网.物联网.互联网三网合一.2017年的时候重点研究过Azure Io ...

  6. HDU - 3591 The trouble of Xiaoqian 题解

    题目大意 有 \(N\) 种不同面值的硬币,分别给出每种硬币的面值 \(v_i\) 和数量 \(c_i\).同时,售货员每种硬币数量都是无限的,用来找零. 要买价格为 \(T\) 的商品,求在交易中最 ...

  7. 杨辉三角 js 练习

    //打印杨辉三角a[[],[],[]] function fn(n){ //i=0 1 2 3.. var a = new Array(n); //行 1 2 3 4.. 创建二维数组. for(va ...

  8. 将pycharm中的代码上传到远程Ubuntu中

    no bb...下面直接放图开干...^_^

  9. [AGC034F]RNG and XOR

    题目   点这里看题目. 分析   第一步可以将\(A\)数组转化成概率\(P(j)\):每一步操作异或\(j\)的概率.   接着发现,\(x\)从\(0\)变成\(i\)的期望等于\(x\)从\( ...

  10. KVM的web

    如果报错!就如下操作 [root@kvm images]# chmod +x /etc/rc.local [root@kvm images]# chmod +x /etc/rc.d/rc.local ...