octubre 9, 2014 Uncategorized

Paginación con AngularJS y ngTable – Parte 8

En este vídeo adaptamos nuestro cliente AngularJS para mostrar los datos en forma de tabla, de tal modo que se puedan hacer llamadas a nuestro API en el servidor para que los datos los recibamos y los representemos de forma paginada.

Para adaptar nuestra aplicación tan sólo tenemos que modificar dos ficheros. El primer fichero que tenemos que modificar es el controlador customers.client.controller.js. Vamos a inyectar la dependencia ngTableParams, y vamos a crear un objeto de este tipo:

Al objeto ngTableParams le pasamos los dos párametros que hemos definido previamente y el objeto ngTableParams lo insertamos en el $scope de nuestro controlador.

Y el segundo y último fichero que tenemos que modificar es la vista list-customers.client.view.html. En el tag table tenemos que pasar como parámetro el objeto ngTableParams que hemos insertado en el $scope de nuestro controlador:

Y por último, en ng-repeat vamos a cambiar la variable customers por $data:

Con estos cambios ya tendríamos adaptado nuestro cliente para que pudiera mostrar y obtener información de forma paginada.

Puedes descargarte y ejecutar la aplicación a través de las siguientes instrucciones:

Github

  1. Sergio dice:

    Hola José Luis, lo primero darte la enhorabuena y las gracias por tu esfuerzo, me parece genial el tutorial.

    Lo estoy siguiendo, intentando crear una aplicación análoga a la tuya pero con un modelo algo más complejo. La cosa es que la acción de borrar que está dentro de la “ng-table” (button… data-ng-click=”remove(customer)..) no funciona me da un error:

    TypeError: undefined is not a function
    at Scope.$scope.remove (http://localhost:3000/modules/customers/controllers/customers.client.controller.js:56:31)

    lineas donde se produce el error:
    // Remove existing Customer
    $scope.remove = function( customer ) {
    if ( customer ) { customer.$remove();

    Pensaba que era de la adaptación que estaba haciendo en mi aplicación pero me he bajado tu código desde github y me pasa exactamente lo mismo.

    ¿tienes alguna idea?

    PD… Esperando el video nº9. GRACIAS.

Deja un comentario

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

Back to top