极客教程AngularJS的orderBy过滤器
AngularJS中的orderBy过滤器用于将给定的数组按特定顺序排序。字符串的默认排序顺序是按字母顺序，而数字是按数字排序的。默认情况下，如果没有指定排序顺序，所有项目都是按升序排序的。
语法:
{{ orderBy_expression | orderBy : expression : reverse : comparator }}
参数值:
- 表达式：该参数值可用于确定过滤项目时的顺序。它可以是以下类型。
- 函数：这个函数是通过传递每个项目作为参数来调用的，返回的值将被用来对相应的项目进行排序。
- 字符串：它可以是AngularJS中的一个表达式，它将对每个项目进行评估，输出结果将被用来对项目进行排序。
- 数组：当我们需要确定1个以上的对象属性时，可以利用它来帮助组织排序的顺序。数组项目可以同时包含字符串和函数。
- reverse : 这是一个可选的参数，如果它的值被设置为_true，将需要对数组的顺序进行反转。
实例1 。这个例子描述了Angular JS中的orderBy过滤器，通过名称来指定数组项的顺序。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
</head>
<body>
<div ng-app="myApp"
ng-controller="orderCtrl">
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>AngularJS orderBy Filter</h3>
<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>
输出 :
例子2：这个例子描述了AngularJS的orderBy过滤器，说明了当我们通过”-“和 “+”的orderBy进行gdp的情况。
<!DOCTYPE html>
<html>
<head>
<title>
AngularJS orderBy Filters
</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">
<div style="text-align:center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
AngularJS orderBy Filter
</h3>
</div>
<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>
输出:
例子3：这个例子描述了AngularJS的orderBy过滤器，说明了按国家对数组项目进行排序。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="myApplication"
ng-controller="orderCtrl">
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>AngularJS orderBy Filter</h3>
<ul>
<li ng-repeat=
"x in sevenwonder | orderBy : '-country'">
{{x.name + ", " + x.country}}
</li>
</ul>
</div>
<script>
var application = angular.module('myApplication', []);
application.controller('orderCtrl', function(scope) {
scope.sevenwonder = [{
"name": "Great Wall of China",
"country": "China"
}, {
"name": "Christ the Redeemer Statue",
"country": "Brazil"
}, {
"name": "Machu Picchu",
"country": "peru"
}, {
"name": "Chichen Itza ",
"country": "Mexico"
}, {
"name": "The Roman Colosseum",
"country": "Rome"
}, {
"name": "Taj Mahal",
"country": "India"
}, {
"name": "Petra",
"country": "Jordan"
}];
});
</script>
<p>The array items are sorted by "country".</p>
</body>
</html>
输出:
