angular入门--列表排序

首先,先上代码

<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后面的条件作为数组就可以了,但是发现貌似没用,哪位大神看到了还麻烦帮忙更正

转载于:https://www.cnblogs.com/benchan2015/p/4798054.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值