Creați un coș de cumpărături simplu utilizând AngularJS Partea 2

În partea anterioară a acestei serii de tutorial, am văzut cum să începeți crearea unui simplu coș de cumpărături folosind AngularJS. Am creat un design simplu, dar nu a fost suficient de mult AngularJS pentru ao numi o aplicație AngularJS. În această parte a seriei tutorial, vom crea o directivă personalizată AngularJS pentru a implementa funcționalitatea necesară.

Noțiuni de bază

Să începem prin clonarea codului sursă al tutorialului anterior de la GitHub.

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

După ce ați clonat codul sursă, navigați la directorul proiectului și instalați dependențele necesare.

cd AngularShoppingCart_Part1 npm instalare

După instalarea dependențelor, porniți serverul.

nod server.js

Punctați browserul la http: // localhost: 3000 / și ar trebui să aveți aplicația să ruleze.

Crearea unei directive privind lista de verificare

În cart.html pagina, elementele și opțiunile acesteia se repetă. Așadar vom crea o directivă AngularJS în acest scop, care va crea articole și opțiunile sale ca pe datele din spate. Din motive de simplitate, să luăm în considerare următoarele elemente din coșul de cumpărături:

['' size ':' 200GB ',' price ':' 2000 ', ' ' '' '' '' '' '' '' ',' : 'i3', 'preț': '20000', 'size': 'i5', 'price' , 'selectat': 0, 'prețuri': ['dimensiune': '16 ',' preț ':' 3000 ', ' size ': '19'; , 'item': 'Optical Mouse', 'id': 'MOU', 'selected' 'dimensiune': 'Avansat', 'preț': '550'], 'item': 'RAM', 'id' : '8000'], 'item': 'Tastatură USB', 'id': '4GB', ' KEY ',' selectat ': 0,' prețuri ': [' dimensiune ':' standard ',' preț ':' 2500 ' ]

Adăugați următoarele date în interiorul CartCtrl.

$ size.shopData = ['item': 'Hard Disk', 'id': 'HD', 'selected': 0, 'prices': ['size': '200GB' '', 'prețul': '4000'], 'item': 'CPU', 'id': 'CPU', 'selected': 'dimensiune': 'i3', 'preț': '20000', 'dimensiune': 'i5', ' ':' MON ',' selectat ': 0,' prețuri ':' 'dimensiune': '16 ' '' '' '' '' '', '' '', ' 350 ', ' dimensiune ':' Avansat ',' preț ':' 550 ' : ['' size ':' 4GB ',' pret ':' 4000 ', ' dimensiune ':' 8GB ',' pret ':' 8000 '], ' item ': 'id': 'KEY', 'selectat': 0, 'prețuri': 'size': 'Standard', 'price': '2500', 'size' '4500'];

Scoateți repetat .panou Codul HTML de la cart.html. Vom crea HTML dinamic folosind ngRepeat și $ scope.shopData. Adăugați următorul cod HTML în prima coloană a textului .rând div. 

 
 
 
Q.item
 
 
 

Așa cum se vede în codul de mai sus, folosind ngRepeat am repetat shopData și a făcut HTML. Salvați modificările de mai sus și reporniți serverul. Actualizați pagina și ar trebui să puteți vizualiza elementele afișate pe pagină.

Apoi, vom afișa opțiunea disponibilă împreună cu un anumit element, cum ar fi dimensiunea și prețul acestuia (consultați datele JSON). În acest scop, vom crea propria noastră directivă AngularJS. Directivele AngularJS sunt una dintre cele mai puternice caracteristici ale AngularJS. Pentru informații detaliate privind directivele AngularJS, consultați documentele oficiale.

Să creăm o direcție personalizată numită Listă de verificare. Deschis cart.js și să creeze o nouă directivă după cum se arată:

.directive ('checkList', functie () return restrict: 'E', template: function (elem, attrs)
\ 
\ Opțiunea 1\ 
\ 
\ Opțiunea2\ 
\ 
\ Opțiunea2\ 
\ 
'; )

Această directivă are numele Listă de verificare. Directiva Listă de verificare are doi parametri, restrânge  și șablon. restrânge definește modul în care va fi numită directiva. Deoarece am definit E, el va fi numit ca nume de element, cum ar fi:

șablon câmpul a definit codul HTML care va înlocui codul Listă de verificare directivă pe pagină. Am folosit același cod HTML static pe care l-am avut mai devreme. Acum sună directiva Listă de verificare pe cart.html pagină.

 
 
Q.item
 
  

Salvați modificările de mai sus și actualizați pagina de coș. Ar trebui să puteți vizualiza opțiunile statice HTML pe pagina de coș.

Acum, să facem ca directiva să citească date $ scope.shopData. În primul rând, în loc să repetăm ​​opțiunile din directivă, vom folosi ngRepeat pentru a repeta opțiunile. Modificați directiva Listă de verificare după cum se arată pentru a face dinamic.

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

După cum puteți vedea în codul de mai sus, așteptăm opțiune pentru a fi transmise directivei. Deci, din partea HTML trebuie să definim un atribut pentru Listă de verificare directiva numita opțiune și să treacă datele necesare. Adaugă opțiune în cart.html așa cum se arată:

 
 
Q.item
 
  

Pentru a accesa data trecută opțiune în cadrul directivei va trebui să definim domeniul de aplicare. În interiorul Listă de verificare directivă domeniu așa cum se arată:

.direcția ('checklist', funcția () return restrict: 'E', domeniul: opțiune: '='
\ 
\ i.size Rs. i.price\ 
\ 
'; )

În acest fel, lista de prețuri a diferitelor elemente de la $ scope.shopData este trecut în directivă. Salvați modificările de mai sus și reporniți serverul. Reîmprospătați pagina și ar trebui să puteți vizualiza dimensiunea și prețul fiecărui element ca opțiuni în pagină.

Acum, dacă încercați să faceți clic pe opțiunea unui buton radio pentru un anumit element, ambele sunt selectate. Pentru a vă asigura că un element este selectat la un moment dat, vom grupa butoanele radio. Pentru asta vom fi obligați să trecem un altul Nume atribuiți directivei din vizualizarea HTML. Deci, adăugați un nou Nume atribuit lui check-list din vedere. Vom trece în articol ID-ul dupa cum Nume, deoarece este unic pentru fiecare element.

Acum adăugați o altă variabilă domeniului directivei pentru ao face accesibilă în șablonul de directivă.

domeniu: opțiune: '=', nume: '='

În interiorul directivei șablon HTML, adăugați numele introdus ca nume de buton radio care ar grupa butoanele radio ale anumitor elemente.

Salvați modificările și actualizați pagina. Încercați să selectați butoanele radio pentru un anumit element și ar trebui să puteți selecta numai unul câte unul.
Calculul totalului pe baza opțiunilor selectate
Pe baza elementelor selectate de utilizator, trebuie să afișăm un sum total al prețului tuturor elementelor selectate. Pentru asta vom crea o domeniul de aplicare $ funcția numită total, care va rezuma prețul total. De fiecare dată când un utilizator selectează un element, actualizăm variabila selectată în $ scope.shopData JSON. Apoi, acest JSON este iteratat pentru a obține prețul total al articolelor selectate. Aici este total funcţie.
$ scope.total = funcție () var t = 0; pentru (var k în $ scope.shopData) t + = parseInt ($ scope.shopData [k] .selectat);  retur t; 
În momentul de față afișăm o valoare greu codată de Rs 100 în div total. În loc de asta, vom numi funcția totală.
Rs. total()
Salvați modificările și actualizați pagina. Dacă încercați să selectați diferitele opțiuni, totalul nu se schimbă cu adevărat. Aceasta deoarece valoarea inițială a selectat variabilă în JSON este 0 și nu este actualizată la selecție. Deci, să trecem valoarea selectată din JSON în directivă și să o actualizăm când este selectat butonul radio. Modificați vizualizarea HTML pentru a include încă unul selectat atribut la Listă de verificare element de directivă. 
Adăuga selectat la directiva de aplicare a directivei.
domeniu: opțiune: '=', nume: '=', selectat: '= selectat'
Vom fixa selectat la butonul radio ngModel directive și directivă i.price la ngValue directivă. Prin urmare, ori de câte ori este selectat butonul radio, valoarea sa este actualizată în selectat atributul $ scope.shopData JSON. 
Salvați modificările de mai sus și actualizați pagina. Încercați să selectați opțiunile butonului radio și în funcție de selecție Total prețul ar trebui actualizat.
Concluzie
În această parte a seriei tutorial, am creat o directivă personalizată și am folosit-o în aplicația noastră simplă de coș de cumpărături. În următoarea parte a acestei serii, vom vedea cum să facem tot divul să fie întotdeauna fixat în partea de sus în timp ce derulează în jos. Vom implementa, de asemenea, pagina de control în care elementele și prețurile selectate vor fi afișate cu un buton înapoi la pagina de coș pentru a personaliza selecția.
Codul sursă din acest tutorial este disponibil pe GitHub. Spuneți-ne gândurile sau corecțiile din comentariile de mai jos!



		
			
	   
	




Cod