Close

Angular JS: Selects Anidados Dinámicos

Es muy común que en nuestros sistemas lleguemos a utilizar los famosos <select></select> para mostrar una lista algún objeto para que nuestros usuarios seleccione. Bueno en este caso les traigo un ejemplo que realice  donde consiste en rellenar un select PADRE y después de seleccionar alguna opción del padre de volada pintar el select HIJO.

¿Que hacemos?

Bueno en el Select padre, hacemos una petición al sevidor con PHP y nuestro amigo PHP hace una consulta a una tabla sencilla llamada “bebidas”, una vez echa la consulta nos trae un JSON a nuestro Controller y nosotros con nuestro $scope le decimos al select Padre que  tome la información y la muestre en sus <option></option>

Nuestra Vista: index.html

OJO : en nuestro ng-option esta la magia ya que le indicamos que pinte nuestro objeto json llamado JSONCategorias y JSONPistos desde nuestra vista.

Nuestro Constroller : app.js

Aquí podemos observar que tenemos $scope.selCategorias y  $scope.selPistos que son nuestro puente de la vista a nuestro controller, si observamos más arriba en nuestra vista(index.html) en los nuestros select tenemos el ng-model=”selCategorias” y ng-model=”selPistos”

Nuestro modelo: index.php

En nuestro PHP no hay mucho que ver , no le metemos mucha lógica ya que solo haremos unas consultas sencillas sin necesidad de hacerle nada a nuestro resultado.

Pueden Descargar el ejemplo de mi GitHub

Pueden Ver el Ejemplo en vivo y en directo aqui

11 thoughts on “Angular JS: Selects Anidados Dinámicos

  1. hey me descargue el proyecto de github, y al momento de abrir el index.html la vista no es igual a la del ejemplo en vivo, que puede ser? y no me carga ni la primera ni segunda lista? que significa? edbo ejecutar el query en algun lado antes de iniciar el index? o cambiar algo en el connector?

  2. Gracias por el ejemplo, con este solucione una parte de lo que estoy haciendo, ahora después de seleccionar al personal que realizara el servicio, debo mostrar una lista con las horas disponibles que tiene esa persona en el día, así que primero tomo en cuenta su horario de trabajo, la hora del día y si ya tiene citas agendadas para solo regresar las disponibles. Trate de regresar esta información en un array, pero no me muestra nada.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.