Фильтр 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 }}

Параметры