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"]; ]]; );
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"} ]]; );
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"} ]]; );
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 |