AngularJS orderBy 过滤器

AngularJS リファレンスマニュアル

定义和用法

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

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

相关页面

AngularJS 教程：Angular フィルタ

实例

例子 1

按字母顺序显示项目：

<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>

実際に試してみてください

例子 2

按 "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>

実際に試してみてください

例子 3

按 "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>

実際に試してみてください

文法

{{ array | orderBy : expression : reverse }}

パラメータ

パラメータ 説明
expression

順序を決定するための表現です。以下のタイプの表現ができます：

文字列：配列がオブジェクトの配列である場合、配列をオブジェクトの属性の値に基づいてソートできます。上記の例を参照してください。

関数：ソートを構成するための関数を作成できます。

配列：複数のオブジェクト属性を使用してソート順序を決定する必要がある場合、配列を使用してください。配列のアイテムは文字列と関数で構成できます。
reverse オプションです。配列の順序を逆転するには true に設定してください。

AngularJS リファレンスマニュアル