AngularJs – Simple ordenamiento de tabla con buscador
Aunque prefiero utilizar plugins, herramientas o fabricar mis propios buscadores, paginadores y ordenamientos, a veces solo necesitamos con cumplir con un requerimiento sencillo. En este caso necesitaba ordenar una simple tabla con pocos datos y permitir que el usuario eligiera por cual columna ordenar. Adicional se agregó un filtro de búsqueda para poder encontrar algún registro fácilmente. Suponiendo que tenemos un array de listado de clientes :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
angular.module('miApp', []) .controller('mainController', function($scope) { $scope.sortType = 'nombre'; $scope.sortReverse = false; $scope.buscar = ''; $scope.clientes = [ { id: 1, nombre: 'Grégor', apellido: 'Gozález', fecha: '22/05/2019' }, { id: 2, nombre: 'Maria', apellido: 'Sulbaran', fecha: '20/05/2019' }, { id: 3, nombre: 'Juan', apellido: 'Cedeño', fecha: '30/05/2019' }, { id: 4, nombre: 'Carlos', apellido: 'Perez', fecha: '31/05/2019' } ]; }); |
Angular nos provee de directivas, filtros y al momento de mostrar la información con la directiva ng-repeat, pasamos los parámetros necesarios para indicar el ordenamiento con «orderBy», la columna por la cual ordenar […]
