Listado dinámico de servicios con AngularJS
Listado dinámico de servicios con AngularJS

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?display=swap&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.







¿Qué te ha parecido este post?

¡Haz clic en una estrella para calificarla!

Puntuación media 5 / 5. Recuento de votos: 1

¡No hay votos hasta ahora! Sé el primero en calificar esta publicación.

No te pierdas otros artículos ...

¡Síguenos en las redes sociales!

¡Lamentamos que esta publicación no te haya sido útil!

¡Permítanos mejorar esta publicación!

¿Cuéntanos cómo podemos mejorar esta publicación?

Resumen
Listado dinámico de servicios con AngularJS
Nombre
Listado dinámico de servicios con AngularJS
Descripción
En este artículo vamos a ver cómo se puede crear un listado dinámico de servicios con Angular JS. Algo básico.
Autor
sapoclay
Nombre del editor
entreunosyceros
Logo del editor

Deja una respuesta

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