Cree un carro de compras simple usando AngularJS Parte 2

En la parte anterior de esta serie de tutoriales, vimos cómo comenzar a crear un carrito de la compra simple utilizando AngularJS. Creamos un diseño simple pero realmente no había suficiente AngularJS para llamarlo una aplicación AngularJS. En esta parte de la serie de tutoriales, crearemos una directiva AngularJS personalizada para implementar la funcionalidad requerida.

Empezando

Comencemos clonando el código fuente del tutorial anterior de GitHub.

git clone https://github.com/jay3dec/AngularShoppingCart_Part1.git

Después de clonar el código fuente, navegue al directorio del proyecto e instale las dependencias necesarias.

cd AngularShoppingCart_Part1 npm install

Una vez instaladas las dependencias, inicie el servidor..

nodo server.js

Dirija su navegador a http: // localhost: 3000 / y debería tener la aplicación en ejecución.

Creación de una directiva de lista de verificación

En el cart.html página, los elementos y sus opciones se repiten. Así que crearemos una directiva AngularJS para este propósito que creará elementos y sus opciones según los datos en el back-end. En aras de la simplicidad, consideremos los siguientes artículos en el carrito de compras:

['item': 'Hard Disk', 'id': 'HD', 'selected': 0, 'prices': ['size': '200GB', 'price': '2000', ' size ':' 400GB ',' price ':' 4000 '], ' item ':' CPU ',' id ':' CPU ',' selected ': 0,' prices ': [' size ' : 'i3', 'precio': '20000', 'tamaño': 'i5', 'precio': '25000'], 'artículo': 'Monitor', 'id': 'MON' , 'seleccionado': 0, 'precios': ['tamaño': '16 \ ", 'precio': '3000', 'tamaño': '19 \", 'precio': '5000'] , 'item': 'Optical Mouse', 'id': 'MOU', 'selected': 0, 'prices': ['size': 'Optical', 'price': '350',  'tamaño': 'Avanzado', 'precio': '550'], 'artículo': 'RAM', 'id': 'RM', 'seleccionado': 0, 'precios': [tamaño ' ':' 4GB ',' precio ':' 4000 ', ' tamaño ':' 8GB ',' precio ':' 8000 '], ' artículo ':' Teclado USB ',' id ':' CLAVE ',' seleccionado ': 0,' precios ': [' tamaño ':' Estándar ',' precio ':' 2500 ', ' tamaño ':' Avanzado ',' precio ':' 4500 '] ]

Agregue los siguientes datos dentro del CartCtrl.

$ scope.shopData = ['item': 'Hard Disk', 'id': 'HD', 'selected': 0, 'prices': ['size': '200GB', 'price': '2000 ', ' tamaño ':' 400GB ',' precio ':' 4000 '], ' artículo ':' CPU ',' id ':' CPU ',' seleccionado ': 0,' precios ': ['size': 'i3', 'price': '20000', 'size': 'i5', 'price': '25000'], 'item': 'Monitor', 'id ':' MON ',' selected ': 0,' prices ': [' size ': '16 \ ",' price ':' 3000 ', ' size ': '19 \",' price ': '5000'], 'item': 'Optical Mouse', 'id': 'MOU', 'selected': 0, 'prices': ['size': 'Optical', 'price': ' 350 ', ' tamaño ':' Avanzado ',' precio ':' 550 '], ' artículo ':' RAM ',' id ':' RM ',' seleccionado ': 0,' precios ' : ['tamaño': '4GB', 'precio': '4000', 'tamaño': '8GB', 'precio': '8000'], 'elemento': 'Teclado USB', 'id': 'KEY', 'selected': 0, 'prices': ['size': 'Standard', 'price': '2500', 'size': 'Advanced', 'price': '4500']];

Quitar lo repetido .panel Código HTML de cart.html. Crearemos el HTML dinámicamente usando ngRepeat y $ scope.shopData. Agregue el siguiente código HTML a la primera columna de la .fila div. 

 
 
 
q.item
 
 
 

Como se ve en el código anterior, usando ngRepetir hemos iterado sobre tiendaDatos y rindió el HTML. Guarde los cambios anteriores y reinicie el servidor. Actualice la página y debería poder ver los elementos que se muestran en la página..

A continuación, mostraremos la opción disponible junto con un elemento en particular, como su tamaño y precio (consulte los datos JSON). Para ello crearemos nuestra propia directiva AngularJS personalizada. Las directivas AngularJS son una de las características más poderosas de AngularJS. Para obtener información detallada sobre las directivas de AngularJS, consulte los documentos oficiales.

Vamos a crear una directiva personalizada llamada lista de control. Abierto cart.js y crea una nueva directiva como se muestra:

.directiva ('checkList', function () return restringir: 'E', template: function (elem, attrs) return '
\ 
\ Opción 1\ 
\ 
\ Opcion 2\ 
\ 
\ Opcion 2\ 
\ 
'; )

Esta directiva tiene el nombre lista de control. La directiva lista de control tiene dos parámetros, restringir  y modelo. Restringir Define cómo se llamará la directiva. Como hemos definido E, se llamará como un nombre de elemento, como:

los modelo campo definido el código HTML que reemplazará el lista de control Directiva en la página. Hemos utilizado el mismo código HTML estático que teníamos anteriormente. Ahora llama a la directiva lista de control sobre el cart.html página.

 
 
q.item
 
  

Guarde los cambios anteriores y actualice la página del carrito. Debería poder ver las opciones de HTML estático en la página del carrito.

Ahora, vamos a hacer que la directiva lea datos de $ scope.shopData. En primer lugar, en lugar de repetir las opciones dentro de la directiva, usaremos ngRepeat para iterar las opciones. Modificar la directiva lista de control como se muestra para hacerlo dinámico.

template: function (elem, attrs) return '
\ 
\ i.size Rs. i.price\ 
\ 
'

Como puede ver en el código anterior, estamos esperando el opción Pasar a la directiva. Así que desde la parte HTML tendremos que definir un atributo para el lista de control directiva llamada opción Y pasar los datos requeridos. Añade el opción en cart.html como se muestra:

 
 
q.item
 
  

Para acceder al pasado opción Dentro de la directiva tendremos que definir el alcance. Dentro de lista de control directiva define alcance como se muestra:

.directiva ('checkList', function () return restringir: 'E', alcance: option: '=', template: function (elem, attrs) return '
\ 
\ i.size Rs. i.price\ 
\ 
'; )

De esta manera la lista de precios de diferentes artículos de $ scope.shopData Se pasa a la directiva. Guarde los cambios anteriores y reinicie el servidor. Actualice la página y podrá ver el tamaño y el precio de cada elemento como opciones en la página.

Ahora, si intenta hacer clic en la opción del botón de radio para un elemento en particular, ambos se seleccionan. Para garantizar que se seleccione un elemento a la vez, agruparemos los botones de opción. Para eso tendremos que pasar otra nombre atribuir a la directiva de la vista HTML. Entonces agrega un nuevo nombre atribuir a lista de verificación desde la vista. Estaremos pasando en el artículo. CARNÉ DE IDENTIDAD como el nombre, ya que es único para cada elemento.

Ahora agregue otra variable al ámbito de la directiva para que sea accesible en la plantilla de la directiva.

alcance: opción: '=', nombre: '='

Dentro de la directiva modelo HTML, agregue el nombre pasado como el nombre del botón de radio que agruparía los botones de radio de elementos particulares.

Guarda los cambios y actualiza la página. Intente seleccionar los botones de opción para un elemento en particular y debería poder seleccionar solo uno a la vez.
Cálculo del total basado en las opciones seleccionadas
Sobre la base de los elementos seleccionados por el usuario, debemos mostrar una suma total del precio de todos los elementos seleccionados. Para eso crearemos un $ alcance función llamada total, Lo que resumirá el precio total. Cada vez que un usuario selecciona un elemento, actualizamos la variable seleccionada en el $ scope.shopData JSON. Entonces este JSON se itera para obtener el precio total de los artículos seleccionados. Aquí está el total función.
$ scope.total = function () var t = 0; para (var k en $ scope.shopData) t + = parseInt ($ scope.shopData [k] .selected);  devolver t; 
En este momento, estamos mostrando un valor codificado de Rs 100 en el div total. En lugar de eso, simplemente llamaremos la función total.
Rs. total()
Guarda los cambios y actualiza la página. Si intenta seleccionar las diferentes opciones, el total no cambia realmente. Es porque el valor inicial de la seleccionado La variable en el JSON es 0 y no se actualiza en la selección. Así que vamos a pasar el valor seleccionado de JSON a la directiva y actualizarlo cuando se selecciona el botón de opción. Modificar la vista HTML para incluir una más. seleccionado atribuir a la lista de control elemento directivo. 
Añadir seleccionado El ámbito de aplicación de la directiva para acceder a ella dentro de la directiva..
alcance: opción: '=', nombre: '=', seleccionado: '= seleccionado'
Bien puesto seleccionado al botón de radio ngModel directiva y la i.price al ngValue directiva. Por lo tanto, cada vez que se selecciona el botón de opción, su valor se actualiza en la seleccionado atributo de la $ scope.shopData JSON. 
Guarde los cambios anteriores y actualice la página. Intente seleccionar las opciones del botón de opción y, en función de la selección, Total precio debe ser actualizado.
Conclusión
En esta parte de la serie de tutoriales, creamos una directiva personalizada y la usamos en nuestra sencilla aplicación de carrito de compras. En la siguiente parte de esta serie, veremos cómo hacer que el div total siempre se fije en la parte superior mientras se desplaza hacia abajo. También implementaremos la página de pago donde se mostrarán los artículos y precios seleccionados con un botón para volver a la página del carrito para personalizar la selección..
El código fuente de este tutorial está disponible en GitHub. Háganos saber sus pensamientos o correcciones en los comentarios a continuación.!



		
			
	   
	




Código