Opprett en enkel handlekurv ved hjelp av AngularJS Del 2

I den forrige delen av denne opplæringsserien så vi hvordan du kommer i gang med å lage en enkel handlekurv ved hjelp av AngularJS. Vi opprettet en enkel design, men det var ikke nok AngularJS å kalle det en AngularJS-applikasjon. I denne delen av opplæringsserien lager vi et tilpasset AngularJS-direktiv for å implementere den nødvendige funksjonaliteten.

Starter

La oss starte med å klone kildekoden til den forrige opplæringen fra GitHub.

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

Etter kloning av kildekoden, naviger til prosjektkatalogen og installer de nødvendige avhengighetene.

cd AngularShoppingCart_Part1 npm installere

Når avhengighetene er installert, start serveren.

node server.js

Pek nettleseren din til http: // localhost: 3000 / og du bør ha programmet kjører.

Opprette et sjekkliste direktiv

I cart.html side, gjenstandene og alternativene gjentas. Så vi lager et AngularJS-direktiv for dette formålet, som vil skape elementer og dets alternativer i henhold til dataene i bakenden. For enkelhets skyld, la oss vurdere følgende produkter i handlekurven:

['' '' '' 'Harddisk', 'id': 'HD', 'valgt': 0, 'priser': ['size': '200GB', 'pris': '2000', ' størrelse ':' 400GB ',' pris ':' 4000 '], ' item ':' CPU ',' id ':' CPU ',' valgt ': 0,' priser ' : 'i3', 'pris': '20000', 'størrelse': 'i5', 'pris': '25000'], 'item': 'Monitor' , 'valgt': 0, 'priser': ['størrelse': '16 ',' pris ':' 3000 ', ' størrelse ': '19', 'pris': '5000'] , '' '' '' Optisk mus ',' id ':' MOU ',' valgt ': 0,' priser ': [' size ':' Optisk ',' pris ':' 350 ', 'størrelse': 'Avansert', 'pris': '550'], 'element': 'RAM', 'ID': 'RM', 'valgt': 0, 'priser' '' 4GB ',' pris ':' 4000 ', ' størrelse ':' 8GB ',' pris ':' 8000 '], ' item ':' USB-tastatur ',' id ' NØKKEL ',' valgt ': 0,' priser ': [' størrelse ':' Standard ',' pris ':' 2500 ', ' størrelse ':' Avansert ',' pris ':' 4500 '] ]

Legg til følgende data inne i CartCtrl.

$ scope.shopData = ['item': 'Harddisk', 'id': 'HD', 'valgt': 0, 'priser': ['size': '200GB', 'pris': '2000 ', ' size ':' 400GB ',' pris ':' 4000 '], ' item ':' CPU ',' id ':' CPU ',' valgt ': 0,' priser ' ['size': 'i3', 'pris': '20000', 'size': 'i5', 'pris': '25000'], 'item': 'Monitor' ':' MON ',' valgt ': 0,' priser ': [' size ': '16 \ ",' price ':' 3000 ', ' size ': '19 \",' price ' '' '' '' '' '', '' '' '' '' Optisk ',' pris ':' Optisk ' 350 ', ' size ':' Avansert ',' pris ':' 550 '], ' item ':' RAM ',' ID ':' RM ',' valgt ': 0,' priser ' : ['' størrelse ':' 4GB ',' pris ':' 4000 ', ' størrelse ':' 8GB ',' pris ':' 8000 '], ' item ':' USB-tastatur ' 'ID': 'KEY', 'selected': 0, 'priser': ['size': 'Standard', 'pris': '2500', 'size': 'Avansert', 'pris' '4500']];

Fjern den gjentatte .panel HTML kode fra cart.html. Vi lager dynamisk HTML ved hjelp av ngRepeat og $ scope.shopData. Legg til følgende HTML-kode i den første kolonnen til .rad div. 

 
 
 
Q.item
 
 
 

Som vist i koden ovenfor bruker du ngRepeat vi har iterated over shopData og gjengitt HTML. Lagre endringene ovenfor og start serveren på nytt. Oppdater siden, og du bør kunne se elementene som vises på siden.

Deretter viser vi det tilgjengelige alternativet sammen med et bestemt element, som størrelsen og prisen (se JSON-dataene). Til det formål skal vi lage vårt eget tilpassede AngularJS-direktiv. AngularJS-direktiver er en av de mest kraftige funksjonene i AngularJS. For detaljerte opplysninger om AngularJS-direktiver, se de offisielle dokumentene.

La oss lage et tilpasset direktiv som heter sjekkliste. Åpen cart.js og opprett et nytt direktiv som vist:

.direktiv ('sjekkliste', funksjon () retur begrense: 'E', mal: funksjon (elem, attrs) return '
\ 
\ Valg 1\ 
\ 
\ Alternativ 2\ 
\ 
\ Alternativ 2\ 
\ 
'; )

Dette direktivet har navnet sjekkliste. Direktivet sjekkliste har to parametere, begrense  og mal. Begrense definerer hvordan direktivet skal kalles. Siden vi har definert E vil det bli kalt som et elementnavn, som:

De mal feltet definerte HTML-koden som vil erstatte sjekkliste direktiv på siden. Vi har brukt samme statiske HTML-kode som vi hadde tidligere. Nå kaller direktivet sjekkliste på cart.html side.

 
 
Q.item
 
  

Lagre endringene ovenfor og oppdatere vogn siden. Du bør kunne se de statiske HTML-alternativene på handlekurven.

Nå, la oss få direktivet til å lese data fra $ scope.shopData. For det første, i stedet for å gjenta alternativene i direktivet, bruker vi ngRepeat for å gjenta alternativene. Endre direktivet sjekkliste som vist å gjøre det dynamisk.

mal: funksjon (elem, attrs) return '
\ 
\ i.size Rs. i.price\ 
\ 
'

Som du kan se i koden ovenfor, forventer vi alternativ å bli sendt til direktivet. Så fra HTML-delen må vi definere et attributt for sjekkliste direktivet heter alternativ og send de nødvendige dataene. Legg til alternativ i cart.html som vist:

 
 
Q.item
 
  

Å få tilgang til passet alternativ I direktivet må vi definere omfanget. Inne i sjekkliste Direktiv definere omfang som vist:

.Direktivet ('sjekkliste', funksjon () retur begrense: 'E', omfang: alternativ: '=', mal: funksjon (elem, attrs)
\ 
\ i.size Rs. i.price\ 
\ 
'; )

På denne måten prislisten av forskjellige varer fra $ scope.shopData er sendt inn i direktivet. Lagre endringene ovenfor og start serveren på nytt. Oppdater siden, og du bør kunne se størrelsen og prisen på hvert element som alternativer på siden.

Nå, hvis du prøver å klikke på alternativet for alternativknappen for et bestemt element, blir begge valgt. For å sikre at ett element er valgt av gangen, grupperer vi radioknappene. For det vil vi bli tvunget til å sende en annen Navn Tilordne direktivet fra HTML-visningen. Så legg til en ny Navn tilskrive sjekkliste fra utsikten. Vi passerer inn i varen ID som Navn, siden det er unikt for hvert element.

Legg til en annen variabel i direktivets omfang for å gjøre det tilgjengelig i direktivmalen.

omfang: alternativ: '=', navn: '='

Inne i direktivet mal HTML, legg inn innleveringsnavnet som navnet på radioknappen som vil gruppere radioknappene til bestemte elementer.

Lagre endringene og oppdater siden. Prøv å velge radioknappene for et bestemt element, og du bør kunne velge bare én om gangen.
Beregning av totalt basert på valgene som er valgt
Basert på elementene valgt av brukeren, må vi vise summen av prisen på alle de valgte produktene. For det vil vi opprette en $ omfang funksjon kalt Total, som vil oppsummere totalprisen. Hver gang en bruker velger et element, oppdaterer vi variabelen som er valgt i $ scope.shopData JSON. Da er denne JSON gjentatt for å få totalprisen for de valgte elementene. Her er Total funksjon.
$ scope.total = funksjon () var t = 0; for (var k i $ scope.shopData) t + = parseInt ($ scope.shopData [k] .selected);  retur t; 
Akkurat nå viser vi en hardkodet verdi på Rs 100 i total div. I stedet for det vil vi bare ringe til totalfunksjonen.
Rs. Total()
Lagre endringene og oppdater siden. Hvis du prøver å velge de forskjellige alternativene, endres ikke endringen totalt. Det er fordi den opprinnelige verdien av valgt variabel i JSON er 0 og er ikke oppdatert på valg. Så la oss sende den valgte verdien fra JSON til direktivet og oppdatere den når alternativknappen er valgt. Endre HTML-visningen for å inkludere en annen valgt attributt til sjekkliste direktivelement. 
Legg til valgt til direktivets omfang for å få tilgang til det i direktivet.
omfang: alternativ: '=', navn: '=', valgt: '= valgt'
Vi stiller inn valgt til radioknappen ngModel direktiv og i.price til ngValue direktiv. Derfor, når radioknappen er valgt, oppdateres verdien i valgt attributten til $ scope.shopData JSON. 
Lagre endringene ovenfor og oppdater siden. Prøv å velge alternativene for alternativknappen og basert på valget Total prisen bør oppdateres.
Konklusjon
I denne delen av opplæringsserien opprettet vi et tilpasset direktiv og brukte det i vår enkle handlekurvprogram. I neste del av denne serien ser vi hvordan du gjør total div alltid løst på toppen mens du ruller nedover. Vi implementerer også kassen siden der de valgte elementene og prisene vil bli vist med en knapp tilbake til vogn siden for å tilpasse utvalget.
Kildekode fra denne opplæringen er tilgjengelig på GitHub. Gi oss beskjed om dine tanker eller eventuelle rettelser i kommentarene nedenfor!



		
			
	   
	




Kode