AngularJS orderBy过滤器

作者 : 慕源网 本文共1905个字,预计阅读时间需要5分钟 发布时间: 2022-05-5 共70人阅读

AngularJS orderBy过滤器,orderBy过滤器将数组按某个表达式进行排序,它可对产品进行分类。

语法:

{{ orderBy_expression | orderBy : expression : reverse }} 

参数说明:

expression:要进行排序的字符串或数组
反转:如果您希望您的数据以相反的顺序显示,请确保参数中的reverse 设置为 true。

示例:查看名称时按大小写排序

<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="orderCtrl">
<ul>
<li ng-repeat="x in customers | orderBy : 'name'">
	{{x.name + ", " + x.city}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
	$scope.customers = [
		{"name" : "Amber", "city" : "ajmer"},
		{"name" : "lakshay ", "city" : "vizag"},
		{"name" : "karan", "city" : "London"},
		{"name" : "bhaskar", "city" : "peshawar"},
			
	];
});
</script>
<p>The array items are arranged by "name".</p>
</body>
</html>

输出 :

AngularJS orderBy过滤器

示例:通过GDP来进行升序或降序

<!DOCTYPE html>
<html>
<head>
<title>AnngularJS Filters : orderBy </title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
	.tabled{float:left; padding:10px;}
</style>
</head>
<body ng-app="orderByDemo">
<script>
angular.module('orderByDemo', [])
	.controller('orderByController', ['$scope', function($scope) {
	$scope.countries =
		[{name:'SPAIN', states:'78', gdp:5},
		{name:'FRANCE', states:'46', gdp:4},
		{name:'PORTUGAL', states:'53', gdp:3},
		{name:'CHILE', states:'06', gdp:2},
		{name:'RUSSIA', states:'21', gdp:1}];
	}]);
</script>
<div ng-controller="orderByController">

<table class="tabled">
	<tr>
	<th>Name</th>
	<th>No of States</th>
	<th>GDP(descending)</th>
	</tr>
	<!-- orderBy Descending (-) -->
	<tr ng-repeat="country in countries | orderBy:'-gdp'">
	<td>{{country.name}}</td>
	<td>{{country.states}}</td>
	<td>{{country.gdp}}</td>
	</tr>
</table>
	
<table class="tabled">
	<tr>
	<th>Name</th>
	<th>No of States</th>
	<th>GDP(ascending)</th>
	</tr>
	<!-- orderBy Ascending (+) -->
	<tr ng-repeat="country in countries | orderBy:'gdp'">
	<td>{{country.name}}</td>
	<td>{{country.states}}</td>
	<td>{{country.gdp}}</td>
	</tr>
</table>
</div>
</body>
</html>

<strong> Examples: Order by case (seven wonders)

输出 :

AngularJS orderBy过滤器


慕源网 » AngularJS orderBy过滤器

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录