Filtro orderBy de AngularJS

Definición y uso

orderBy Los filtros nos permiten ordenar los arrays.

Por defecto, las cadenas se ordenan alfabéticamente y los números se ordenan numéricamente.

Páginas relacionadas

Tutorial de AngularJS:Filtros de Angular

Ejemplo

Ejemplo 1

Muestre los elementos en orden alfabético:

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

Ejemplo 2

Por "city", ordene el array:
<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" : "Around the Horn", "city" : "London"}
    {"name" : "B's Beverages", "city" : "London"}
]];
);

</script>

Ejemplo 3

Por "city", ordene el array en orden descendente:
<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" : "Around the Horn", "city" : "London"}
    {"name" : "B's Beverages", "city" : "London"}
]];
);

</script>

Pruebe usted mismo

Gramática {{ array Descripción | orderBy : Array: Si es necesario determinar el orden de clasificación de múltiples propiedades de objeto, utilice un array. Los elementos del array pueden ser cadenas y funciones. :

}}

}} Parámetros
Descripción

expression

Expresión para determinar el orden. La expresión puede ser del siguiente tipo:

Cadena: Si el array es un array de objetos, puede ordenar el array según el valor de una propiedad del objeto. Vea el ejemplo anterior.

Función: Puede crear una función para organizar el orden.

Array: Si es necesario determinar el orden de clasificación de múltiples propiedades de objeto, utilice un array. Los elementos del array pueden ser cadenas y funciones. reverse