AngularJS | orderBy Filtrar

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 :

output1

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 :

output example 2

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *