AngularJS orderBy 过滤器
示例
按字母顺序显示项目
<div ng-app="myApp" ng-controller="orderCtrl">
<ul>
<li ng-repeat="x in cars | orderBy">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
$scope.cars = ["Dodge", "Fiat", "Audi", "Volvo", "BMW", "Ford"];
});
</script>
亲自试一试 »
定义和用法
The orderBy 过滤器允许我们对数组进行排序。
默认情况下，字符串按字母顺序排序，数字按数字顺序排序。
语法
{{ 数组 | orderBy : 表达式 : 反转 }}
参数值
| 值 | 描述 |
|---|---|
| 表达式 | 用于确定排序顺序的表达式。表达式可以是以下类型 字符串：如果数组是对象数组，则可以根据对象属性之一的值对数组进行排序。请参阅下面的示例。 函数：您可以创建函数来组织排序。 数组：如果您需要多个对象属性来确定排序顺序，请使用数组。数组项可以是字符串和函数。 |
| 反转 | 可选。如果要反转数组的顺序，则将其设置为 true。 |
更多示例
示例
按“城市”排序数组
<div ng-app="myApp" ng-controller="orderCtrl">
<ul>
<li ng-repeat="x in customers | orderBy : 'city'">{{x.name + ", " + x.city}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
$scope.customers = [
{"name" : "Bottom-Dollar Marketse" ,"city" : "Tsawassen"},
{"name" : "Alfreds Futterkiste", "city" : "Berlin"},
{"name" : "Bon app", "city" : "Marseille"},
{"name" : "Cactus Comidas para llevar", "city" : "Buenos Aires"},
{"name" : "Bolido Comidas preparadas", "city" : "Madrid"},
{"name" : "Around the Horn", "city" : "London"},
{"name" : "B's Beverages", "city" : "London"}
];
});
</script>
亲自试一试 »
示例
按“城市”降序排序数组
<div ng-app="myApp" ng-controller="orderCtrl">
<ul>
<li ng-repeat="x in customers | orderBy : '-city'">{{x.name + ", " + x.city}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
$scope.customers = [
{"name" : "Bottom-Dollar Marketse" ,"city" : "Tsawassen"},
{"name" : "Alfreds Futterkiste", "city" : "Berlin"},
{"name" : "Bon app", "city" : "Marseille"},
{"name" : "Cactus Comidas para llevar", "city" : "Buenos Aires"},
{"name" : "Bolido Comidas preparadas", "city" : "Madrid"},
{"name" : "Around the Horn", "city" : "London"},
{"name" : "B's Beverages", "city" : "London"}
];
});
</script>
亲自试一试 »
相关页面
AngularJS 教程：Angular 过滤器
