SELECTS DEPENDIENTES CON ANGULAR JS

<script title=”selects dependientes con angular js” src=”other pages”>

Vale, que eso de los selects dependientes se puede hacer de miles de maneras y con miles de frameworks diferentes. Pero como a mi me gusta reinventar la rueda, pues…

Esta es una forma ridículamente absurda (por lo fácil de implementar) de como realizar los tan mencionados selects dependientes, pero con una vuelta de tuerca (si, en Javascript)…

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
	<title>Select dependientes</title>
</head>
<body ng-app="selects">
	<script>
		var selects = angular.module('selects', []);
		selects.controller('UbicacionCtrl', ['$scope', function($scope) {
			$scope.ubicacion = {
				'Dtto. Capital': {
					'Libertador': ['La Vega', 'Antimano']
				},
				'Miranda': {
					'Plaza': ['Guarenas'],
					'Zamora': ['Guatire']
				}
			};
		}]);
	</script>
	<div ng-controller="UbicacionCtrl" >
		<select ng-model="model_estado" ng-options="estado for (estado, municipios) in ubicacion">
			<option value="">- Seleccione -</option>
		</select>
		<select ng-model="model_municipio" ng-disabled="!model_estado" ng-options="municipio for (municipio, parroquias) in model_estado">
			<option value="">- Seleccione -</option>
		</select>
		<select ng-model="model_parroquia" ng-disabled="!model_estado || !model_municipio" ng-options="parroquia for parroquia in model_municipio">
			<option value="">- Seleccione -</option>
		</select>
	</div>
</body>
</html>

Me parece que el ejemplo es claro en cuanto a la forma en la que implementa la acción, ahora bien, para los que no entienden ni papa, bueh, ya será para otro post en el que explicaré la potencia de este front-end framework MVW.

Siento no explicar las acciones que ejecuta este código. Debería explicarlas, pero estoy escribiendo este post con una premura que ni les cuento, la misma premura con la que me pidieron este requerimiento para un sistema. Pues, la vida es así, no la he inventado yo 😦 …

Tengo que organizar este blog, o no van a caber las ideas que tengo en la cabeza…

Actualizado: profundizaré en este tema en el Tutorial de Angular.js, lo prometo 😉

</script>

Anuncios

5 comentarios en “SELECTS DEPENDIENTES CON ANGULAR JS

  1. Tengo un problema, cuando visualizo el valor de “model_estado” me visualiza todo lo que está dentro, osea, por ejemplo, cuando elijo “Dtto. Capital” me muestra —> { ‘Libertador’: [‘La Vega’, ‘Antimano’]}, cómo hago para que solo me muestre “Libertador”???

    Me gusta

Los comentarios están cerrados.