Inicio Apuntes FPApuntes DAW Listado dinámico de servicios con AngularJS

Listado dinámico de servicios con AngularJS

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

El tutorial que voy a dejar hoy viene a que sigo aprendiendo (cuando tengo tiempo) AngularJS ya que me parece un lenguaje con el que puedo hacer muchas cosas y  muy chulas. O al menos muy prácticas. En el post que escribo se podrá ver un listado dinámico de unos hipotéticos servicios que funcionará de manera dinámica y muy sencilla.

El ejercicio que voy a desarrollar en este post constará de tres archivos. El primero incluirá el HTML del proyecto. En el se mostrarán las opciones y los resultados de la operación. El segundo archivo JS incluirá la función que se encargará de realizar las operaciones sobre los precios de los servicios. En el tercer archivo se incluirán los estilos (básicos) para este proyecto.

El resultado final de este proyecto lo puedes ver funcionando en el siguiente enlace. Y ahora que vas echado un vistazo y comprobado que funciona, vamos a ver el código fuente.

Listado dinámico con AngularJS

Como ya he dicho el primero de los archivos que vamos a llamar index.html contendrá lo mismo que a continuación se muestra:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8"/>
		<title>Listado con AngularJS</title>

		<!-- Añadimos una fuente de google -->
		<link href="http://fonts.googleapis.com/css?family=PT+Sans:400,700" rel='stylesheet' />

		<!-- Incluímos el css -->
		<link href="assets/css/style.css" rel="stylesheet" />
	</head>

	<body>

		<form id="main" ng-app ng-controller="myservices">
			<h1>Servicios con AngularJS</h1>

			<ul id="services">
				<!-- Los servicios se insertarán aquí -->
				<li ng-repeat="service in services">
					<label>
					<input type="checkbox" ng-model="service.selected" value="1" name="{{service.title}}" />
						{{service.title}}<span>€{{service.price}}</span></label>
				</li>
			</ul>
			<!--Aquí se mostrará la suma total según los precios del listado-->
			<p id="total">total: <span>€{{total()}}</span></p>

			<input type="submit" id="order" value="Calcular"/>

		</form>

		<!-- Incluimos angular -->
		<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.5/angular.min.js"></script>
		<!-- Llamamos al js -->
	  <script src="assets/js/script.js"></script>

	</body>
</html>

Como se puede ver el código es bastante sencillo de entender.

Función JS

Ahora vamos a ver el archivo script.js que debería estar guardado dentro de las carpetas assets y esta dentro de otra llamada js.

function myservices($scope){
    $scope.services=[
        { title: 'Pinchamiento de uvas', price: 200},
        { title: 'Rascado de bombillas', price: 250},
        { title: 'Avistamiento de cejas', price: 100},
        { title: 'Sorbedor de aire', price: 10}];
    $scope.total=function(){
        //Total a mostrar
        var t = 0;
        angular.forEach($scope.services, function(s){
            //Si se selecciona se añade el precio al total mostrado (t)
            if(s.selected)
                t+=s.price;
        });
        return t;
    };
}

Como se puede ver en este caso, el archivo solo consta de una función que será la encargada de almacenar los datos que posteriormente se cargarán en el archivo index.html.  Además esta función se encargará también de sumar o restar el precio al total del listado.

Estilos CSS

Para terminar solo hay que añadir unos estilos css. Esto como siempre ocurre con los estilos pueden ser al gusto del consumidor. El archivo de estilos se guardará dentro de la carpeta assets y dentro también de la carpeta css.  El archivo va a ser llamado style.css y contiene lo siguiente:

*{
    margin:0;
    padding:0;
}
 
 
/*-------------------------
    Estilos generales
--------------------------*/
 
 
html{
    background-color:#edf0f4;
}
 
body{
    font:15px/1.3 Arial, sans-serif;
    color: #4f4f4f;
}
 
a, a:visited {
    outline:none;
    color:#389dc1;
}
 
a:hover{
    text-decoration:none;
}
 
section, footer, header, aside{
    display: block;
}
 
 
/*----------------------------
    Contenido del main
-----------------------------*/
 
 
#main{
    padding:100px;
    background-color:#fff;
    box-shadow:0 0 1px #ccc;
    width:700px;
    margin:100px auto;
    border-radius:6px;
    font:bold 24px/1 'PT Sans', sans-serif;
    color:#6b6b6b;
}
 
 
#main h1{
    font-size:36px;
    text-align: center;
    text-transform: uppercase;
    padding: 0 0 80px;
 
}
 
#services{
    list-style:none;
    margin:0 auto;
    width:600px;
}
 
#services li{
    background-color: #fbfbfc;
    box-shadow:0 1px 1px #eee;
    font-size:22px;
    color: #85898b;
    margin-bottom:15px;
    border-radius:4px;
}
 
#services li span{
    float:right;
    opacity:0.6;
}

#services li label{
    display:block;
    cursor:pointer;
    padding:22px 30px;
}

#services li input[type=checkbox]{
    border:1px solid #ccc;
    box-shadow:1px 1px 1px #ccc;
    margin-right:10px;
    width:16px;
    height:16px;
    display:inline-block;
    vertical-align: middle;
}
 
#total{
    font-size:24px;
    text-align:right;
    width:570px;
    margin:30px auto 0;
    padding-right:30px;
}
 
#total span{
    display:inline-block;
    min-width:70px;
}
 
 
#order{
    font:inherit;
    font-size:24px;
    cursor:pointer;
    border:none;
    display:block;
    background-color:#89bde5;
    color:#fff;
    text-transform:uppercase;
    width:200px;
    margin:80px auto 0;
    text-align:center;
    padding:22px 0;
    border-radius: 3px;
    box-shadow:0 1px 1px #ddd, 0 0 20px #84b8e0 inset;
}
 
#order:hover{
    opacity: 0.9;
    border: 1px solid black;

}

Y con esto ya podemos ejecutar nuestro nuevo listado dinámico realizado con AngularJS.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.