En este tutorial crearemos un filtro de búsqueda y ordenación usando AngularJS. Este código puede filtrar y ordenar una matriz de datos dentro de la tabla html. El código usa directivas angulares para ordenar y filtrar el elemento de matriz al vincular el cuadro de texto en ng-model y luego agregar una función de filtro en ng-repeat con el mismo valor que el modelo y también proporcionando un argumento de cadena para getSortClass () en el tabla th. Este es un programa fácil de usar, siéntase libre de modificarlo y usarlo en su sistema.
Usaremos AngularJS como un marco que tiene atributos HTML personalizados adicionales incrustados en él. Puede interpretar esos atributos como directivas para vincular partes ingresadas de la página a un modelo que se representa como variables JavaScript estándar.
Empezando:
Primero necesitará descargar e instalar AngularJS aquí está el enlace https://angularjs.org/, y este es el enlace para el bootstrap que utilicé para el diseño del diseño https://getbootstrap.com/.
Crear la interfaz principal:
Este código contiene la interfaz de la aplicación. Este código representará la aplicación y mostrará el formulario. Para hacerlo, escriba este bloque de código dentro del editor de texto y guárdelo como index.html.
<!DOCTYPE html>
<html lang="en" ng-app="myModule">
<head>
<meta charsert="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body ng-controller="myController">
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="https://compubinario.com">CompuBinario</a>
</div>
</nav>
<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3 class="text-primary">JavaScript - Filtro de Busqueda y Ordenamiento usando AngularJS</h3>
<hr style="border-top:1px dotted #ccc;"/>
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="form-inline">
<input type="text" class="form-control" ng-model="search" placeholder="Buscar Aqui..."/>
</div>
<br />
<table class="table table-bordered">
<thead class="alert-info">
<tr>
<th ng-click="sortData('firstname')">Nombres<div ng-class="getSortClass('firstname')"></div></th>
<th ng-click="sortData('lastname')">Apellidos<div ng-class="getSortClass('lastname')"></div></th>
<th ng-click="sortData('gender')">Genero<div ng-class="getSortClass('gender')"></div></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="member in members | orderBy:sortColumn:reverseSort | filter: search">
<td>{{member.firstname}}</td>
<td>{{member.lastname}}</td>
<td>{{member.gender}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="js/angular.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Crear el script:
Este código contiene la función principal de la aplicación. Este código ordenará y filtrará los datos de la tabla cuando el usuario manipule las entradas. Para eso, simplemente copie y escriba estos bloques de códigos dentro del editor de texto, luego guárdelos dentro del directorio js como script.js.
var app = angular.module("myModule", [])
.controller("myController", function($scope){
var members = [
{firstname: "John", lastname: "Smith", gender: "Masculino"},
{firstname: "Claire", lastname: "Temple", gender: "Femenino"},
{firstname: "Victor", lastname: "Carmona", gender: "Masculino"},
{firstname: "Andres", lastname: "Lopez", gender: "Masculino"},
{firstname: "Luis", lastname: "Santana", gender: "Masculino"},
{firstname: "Carmen", lastname: "Palomares", gender: "Femenino"},
{firstname: "Augusto", lastname: "Vegeta", gender: "Masculino"},
{firstname: "Antonio", lastname: "Rivera", gender: "Masculino"},
];
$scope.members = members;
$scope.reverseSort = false;
$scope.sortData = function(column){
$scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false;
$scope.sortColumn = column;
}
$scope.getSortClass = function(column){
if($scope.sortColumn == column){
return $scope.reverseSort ? 'down-arrow' : 'up-arrow';
}
return '';
}
});
Ahí lo tienes, creamos con éxito un filtro de búsqueda y ordenación usando AngularJS. Espero que este tutorial lo ayude a lo que está buscando.
Antes de la descarga del Tutorial presiona el siguiente enlace para que te suscribas a nuestro Canal de YouTube:
