Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

Ionic práctico: App con REST

Crear la lista de elementos y aplicación de sus datos

¡Prueba gratis durante 10 días

nuestros 1291 cursos !

Prueba gratis Mostrar modalidades de suscripción
Además de utilizar el slider, también se muestran los datos en formato de lista para que sea fácil ver todos los registros y seleccionar el que necesitemos en concreto. Veremos en este vídeo cómo crear esta lista.

Transcripción

Me faltan solo la vista Lista y luego la vista de Modificar, pero vemos que esto está prácticamente resuelto, y que en realidad lo que queda, mucho de ello es simplemente copiar y pegar. Voy a irme al archivo Lista.html y voy a trabajar sobre él. ¿Qué es lo que quiero con él? Pues utilizar un Ion List, y para ello pues puedo copiar código del que ya he creado... e ir añadiendo elementos. Aquí en realidad voy a necesitar un ngFor. Como decía, en realidad esto va a ser mucho copiar y pegar. Tengo ya un ngFor, así que puedo utilizarlo, copio todo el código lo pego... y aquí tengo, "Let Pajaro of Pajaros", y luego "Let i = Index", este pájaro lo voy a necesitar, voy a necesitar que se cargue en esos datos, pero eso ya lo he hecho previamente. No necesito más que crear la variable Pajaros, voy a irme a Lista.ts y como digo, voy a crear esta variable, por un lado, y por otro lado, voy a hacer una llamada al servicio que me recupera todos los pájaros. Lo copio, lo pego, me aseguro de que está la variable Servicios que efectivamente aquí está, para que se recargue siempre, lo meto en el constructor y pido que efectivamente recupere todos los servicios, que me los pinte, que me meta los datos recibidos en la variable Pajaros que acabo de crear, pero eso sí, no necesito que llame a ningun función, porque esa función aquí no me hace falta para nada. Bien, ya tengo la carga de los datos lista, como podemos ver es básicamente reutilziar código que ya había creado. Y ahora aquí sí que voy a añadir cosas nueva, por ejemplo, voy a hacer que haya una etiqueta P, dentro de esa etiqueta P voy a añadir una segunda etiqueta Strong y voy a añadir, pues eso, contenidos del pájaro, por ejemplo, que al principio de cada fila salga el nombre del pájaro, pajaro.pajaro, y luego fuera del strong puedo añadir un guión, espacio, y de nuevo pájaro, pero en este caso el título. Y luego necesito un par de botones. También tengo botones para copiar, lo copio, lo pego, solo que los botones van a ser un poco distintos, de hecho, voy a eliminar aquí un montón de código, porque solo necesito que sean colocados a la derecha, o sea, ItemRight, y luego que tengan un clic, pero ese clic, de momento, lo voy a quitar y lo pondré más adelante porque todavía no tengo las funciones creadas. El primero de ellos va a servir para editar, y el segundo de los botones va a servir para borrar. Y con esto ya tengo preparada la vista. Lo guardo, me aseguro de que esté guarada esta Lista, compruebo que la compilación vaya bien, efectivamente todo va correcto, así que me voy al navegador y espero a que me recargue la página. Ya tengo la página, me puedo ir a Lista y aquí me sale cada uno de ellos con cada uno de esos botones. Como vemos, funciona perfectamente.

Ionic práctico: App con REST

Practica creando una aplicación con Ionic, gracias a la combinación de AngularJS, HTML5 y un back-end basado en PHP para servir datos a tu app así como modificar registros.

3:00 horas (38 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.