Tabla de contenido
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.