FILTRO DE BUSQUEDA EN ANGULAR JS

<script src=”my own” title=”filtro de busqueda en angular js”>

Quizás existan otros métodos de búsqueda avanzada basados en jQuery, pero particularmente me inclino por este que es (en mi opinión) más sencillo de implementar. Sólo un campo search y en este ejemplo, una tabla.

La lógica para presentar los datos puede ser cualquiera (una tabla, párrafos, etcétera), y manejada por cualquier backend (datos en JSON, una BD o un servicio web).

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Busqueda Angular</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
	<script>
		angular.module('busquedaAvanzada', [])
		.controller('busquedaController', ['$scope', function($scope){
			$scope.lista = [
				{nombre: 'Pepe', apellido: 'Trueno'},
				{nombre: 'Kava', apellido: 'Zorro'},
				{nombre: 'Rosa', apellido: 'Melo'},
				{nombre: 'Elmo', apellido: 'Jones'},
				{nombre: 'Gato', apellido: 'Negro'}
			];
		}]);
	</script>
</head>
<body ng-app="busquedaAvanzada">
	<input type="text" ng-model="busqueda">
	<table ng-controller="busquedaController">
		<thead>
			<tr>
				<th>Nombre</th>
				<th>Apellido</th>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="item in lista | filter: busqueda">
				<td>{{item.nombre}}</td>
				<td>{{item.apellido}}</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

El campo search puede ser cualquier tipo de input que acepte texto, sólo es una cuestión de presentación, que vale decir que éste puede ser más específico. Pueden ver un ejemplo sencillo aquí.

En este caso particular, elegí servir los datos de ejemplo como un arreglo sencillo de objetos con dos atributos por objeto. La “magia” la realiza la directiva filter que se encarga de coincidir la ocurrencia de la iteración con lo contenido en el modelo busqueda.

Independientemente de la forma en la que se sirvan los datos, Angular.js permite una fácil presentación de los datos mediante controladores y directivas.

Tengo pendiente hacer un tutorial de Angular.js y uno de Node.js, porque creo que ya he hablado bastante de ellos y me entusiasma seguir hablando.

Lo anotaré en mi lista de cosas por hacer, luego la filtro jejeje 😉

</script>

Anuncios