AngularJS orderBy过滤器
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>输出 ：
示例：通过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)输出 ：
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
