El filtro orderBy es una herramienta útil utilizada en angular js.
El canal orderBy lo alienta a ordenar una exhibición.
Por supuesto, ordena strings en requests de orden secuencial y números en la solicitud numérica.
Sintaxis:
{{ orderBy_expression | orderBy : expression : reverse }}
Explicación de parámetros:
expresión: Se utiliza para decidir la solicitud. Muy bien puede ser una string, un trabajo o un grupo.
invertir: Es discrecional. Si desea que sus datos se muestren en orden inverso, asegúrese de que la condición inversa en los parámetros se establezca como verdadera.
Ejemplos: Ordenar por caso cuando revisamos los nombres
<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="orderCtrl">
<ul>
<li ng-repeat="x in customers | orderBy : 'name'">
{{x.name + ", " + x.city}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
$scope.customers = [
{"name" : "Amber", "city" : "ajmer"},
{"name" : "lakshay ", "city" : "vizag"},
{"name" : "karan", "city" : "London"},
{"name" : "bhaskar", "city" : "peshawar"},
];
});
</script>
<p>The array items are arranged by "name".</p>
</body>
</html>
Producción :
Ejemplos: Ordenar por caso cuando pasamos por pib por “-” y “+” orderBy
<!DOCTYPE html>
<html>
<head>
<title>AnngularJS Filters : orderBy </title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
.tabled{float:left; padding:10px;}
</style>
</head>
<body ng-app="orderByDemo">
<script>
angular.module('orderByDemo', [])
.controller('orderByController', ['$scope', function($scope) {
$scope.countries =
[{name:'SPAIN', states:'78', gdp:5},
{name:'FRANCE', states:'46', gdp:4},
{name:'PORTUGAL', states:'53', gdp:3},
{name:'CHILE', states:'06', gdp:2},
{name:'RUSSIA', states:'21', gdp:1}];
}]);
</script>
<div ng-controller="orderByController">
<table class="tabled">
<tr>
<th>Name</th>
<th>No of States</th>
<th>GDP(descending)</th>
</tr>
<!-- orderBy Descending (-) -->
<tr ng-repeat="country in countries | orderBy:'-gdp'">
<td>{{country.name}}</td>
<td>{{country.states}}</td>
<td>{{country.gdp}}</td>
</tr>
</table>
<table class="tabled">
<tr>
<th>Name</th>
<th>No of States</th>
<th>GDP(ascending)</th>
</tr>
<!-- orderBy Ascending (+) -->
<tr ng-repeat="country in countries | orderBy:'gdp'">
<td>{{country.name}}</td>
<td>{{country.states}}</td>
<td>{{country.gdp}}</td>
</tr>
</table>
</div>
</body>
</html>
<strong> Examples: Order by case (seven wonders)
Producción :
<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<div ng-app="myApplication" ng-controller="orderCtrl">
<ul>
<li ng-repeat="x in sevenwonder | orderBy : '-country'">
{{x.name + ", " + x.country}}</li>
</ul>
</div>
<script>
var application = angular.module('myApplication', []);
application.controller('orderCtrl', function($scope) {
$scope.sevenwonder = [
{"name" : "Great Wall of China" ,"country" : "China"},
{"name" : "Christ the Redeemer Statue", "country" : "Brazil"},
{"name" : "Machu Picchu", "country" : "peru"},
{"name" : "Chichen Itza ", "country" : "Mexico"},
{"name" : "The Roman Colosseum", "country" : "Rome"},
{"name" : "Taj Mahal", "country" : "India"},
{"name" : "Petra", "country" : "Jordan"}
];
});
</script>
<p>The array items are sorted by "country".</p>
</body>
</html>
Producción :
Publicación traducida automáticamente
Artículo escrito por amberagrawal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA