W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

AngularJS orderBy 过滤器



Example

按字母顺序显示项目:

<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>
尝试一下 »

定义和用法

orderBy 过滤器允许我们对数组进行排序。

默认情况下,字符串按字母顺序排序,数字按数字排序。


语法

{{ array | orderBy : expression : reverse }}

参数值

描述
expression 用于确定顺序的表达式。表达式可以是:

字符串:如果数组是对象数组,则可以通过其中一个对象属性的值对数组进行排序。 参见下面的例子。

函数:您可以创建一个函数来整理排序。

数组:如果需要多个对象属性来确定排序顺序,请使用数组。数组项可以是字符串和函数。
reverse 可选。如果要反转数组的顺序,请设置为true。

更多实例

Example

将数组按“city”排序:

<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>
尝试一下 »

Example

按照 "city" 降序排序:

<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 过滤器