มาดูการเรนเดอร์ก่อน:
ตะกร้าสินค้า
1. รหัส
หากคุณสนใจที่จะรู้วิธีการทำเช่นนี้หลังจากอ่านเอฟเฟกต์นี้ให้อ่านต่อ ไม่มากเพียงอัปโหลดรหัส
รหัส HTML:
<! doctype html> <html lang = "en" ng-app = "cart"> <head> <meta charset = "utf-8"> <title> ตะกร้าสินค้า </title> <link rel = "stylesheet" href = "../ สคริปต์/angular-1.4.0-rc.2/docs/ส่วนประกอบ/bootstrap-3.1.1/css/bootstrap.min.css"> <link rel = "stylesheet" href = "main.css"> </head> <Caption> AngularJS การใช้งานรถเข็น </section> <tr> <th> หมายเลขซีเรียล </th> <th> ข้อมูลผลิตภัณฑ์ </th> <th> ราคาต่อหน่วย (หยวน) </th> <th> ปริมาณ </th> <th> จำนวน (yuan) </th> <th> 1}} </td> <td> <a href = "{item.linkurl}}" target = "_ blank"> {{item.title}} </a> </td> <td> {item.price ng-disabled = "item.quantity <= 1">-</button> <อินพุต type = "text" size = "5" ng-model = "item.quantity" ng-keydown = "ปริมาณ keydown ()" ng-keyup = "quantitykeyup () <td> {{item.price*item.quantity | หมายเลข: 2}} </td> <td> <button type = "ปุ่ม" ng-click = "ลบ (item.id)"> ลบ </button> </td> </tr> <span> {{getQuantites ()}} </span> ทั้งหมด: <span ng-show = "getTotalAmount () <15000"> {{getTotalAmount () | หมายเลข: 2}} </span> <span ng-show = "getTotalAmount () ปิด) </span> <span> ({{getTotalAmount () | หมายเลข: 2}}) </span> </span> <ปุ่มประเภท = "ปุ่ม" ng-click = "AlertSubmit ()"> การชำระเงิน </duct> </div> <script src = " src = "app.js"> </script> </body> </html>รหัส JS:
/สร้างโดย WQQ เมื่อปี 2016/5/25 /var cartmodule = angular.module ('cart', []); cartmodule.controller ('cartctr', ['$ scope', ฟังก์ชั่น ($ scope) {$ scope.discount = 0.9; $ scope.items = [{id: 10001, ชื่อเรื่อง: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.4.cwywjs&id=532166746631"}, {id: 10002, ชื่อ: 1, linkurl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.26.cwywjs&id=45711116847" ปริมาณ: 1, linkurl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.15.cwywjs&id=525614504276" 7299.00, ปริมาณ: 1, linkurl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.37.cwywjs&id=41541519814"}]; Angular.foreach ($ scope.items, ฟังก์ชั่น (รายการ, ดัชนี, อาร์เรย์) {ถ้า (item.id === id) {item.quantity ++;}})}; // เหตุการณ์คีย์ดาวน์ในกล่องอินพุตเพื่อหลีกเลี่ยงการป้อนข้อมูลจำนวนเต็มที่ไม่ใช่จำนวนมาก (96 <= keycode && keycode <= 105) || keycode == 8) {// ลูกศรคีย์↑→↓ eter (เหตุการณ์) {Event = Event || $ scope.items.foreach (ฟังก์ชั่น (รายการ, ดัชนี) {ถ้า (item.id == id) {ถ้า (ยืนยัน ("ยืนยันเพื่อลบรายการนี้ออกจากตะกร้าสินค้า?")) {$ scope.items.splice (ดัชนี 1); return;}}}})}; angular.foreach ($ scope.items, ฟังก์ชั่น (รายการ, array) {ถ้า item.quantity) {ปริมาณ += parseint TotalAmount += item.quantity * item.price;});2. การวิเคราะห์
โปรดเพิกเฉยต่อสไตล์ของ bootstrap เรามุ่งเน้นไปที่เชิงมุมเท่านั้น รหัสนั้นง่ายมาก มาวิเคราะห์สั้น ๆ :
1. เตรียม
ก่อนอื่นเรากำหนดโมดูล cart คอนโทรลเลอร์ cartCtr และแนะนำพวกเขาลงในรหัส HTML ในเวลาเดียวกันเรายังกำหนด items อาร์เรย์ใน JS เพื่อจำลองสิ่งต่าง ๆ ในตะกร้าสินค้า
2. iterator ng-repeat
เพื่อที่จะสำรวจข้อมูลใน items แบบไดนามิกเราใช้คำสั่ง ng-repeat ในตัวในเชิงมุมซึ่งสามารถสำรวจอาร์เรย์และสร้างองค์ประกอบ DOM ได้อย่างง่ายดาย ที่นี่เราลูปเพื่อสร้างแท็ก 4 <tr> :
<tr ng-repeat = "รายการในรายการ">
item เป็นวัตถุในอาร์เรย์ items คุณรู้สึกว่านี่คือ for/in Loop ใน JS หรือไม่ ~ ถ้าคุณเป็นนักพัฒนา. NET และใช้มีดโกน ASP.NET MVC คุณจะคุ้นเคยกับการทำงานขององค์ประกอบ DOM ที่ไร้รอยต่อในภาษาอื่น ๆ สำหรับ Java และ PHP มีไวยากรณ์ที่คล้ายกันหรือไม่ฉันไม่รู้ ฉันเป็นนักพัฒนา. NET ที่ทำงานหนัก
ตัววนซ้ำ ng-repeat
เราจะเห็น $index ถูกใช้ใน TD แรกซึ่งอยู่ใน ng-repeat ไม่ใช่สิ่งที่เรากำหนด ค่าของมันคือดัชนีของ item ปัจจุบันใน items เริ่มต้นจาก 0 ดังนั้นเราจึงใช้ $index+1 เป็นหมายเลขลำดับและอื่น ๆ (คล้ายกับ item linkUrl ) การเชื่อมโยงข้อมูล
เราใช้ {{xxx | number: 2}} ในคอลัมน์ราคาหน่วยและจำนวนเงิน นี่คือตัวกรองในเชิงมุม ฟังก์ชั่นของมันคือการรักษาค่าก่อนหน้า xxx สองตำแหน่งทศนิยม สำหรับจำนวนเงินเราจะต้องแม่นยำมากขึ้น ฉันเพิ่งบอกว่านี่เป็นตัวกรองดังนั้นจึงมีสิ่งอื่น ๆ เช่น currency คุณสามารถเพิ่มสัญลักษณ์ $ ที่ด้านหน้าของ XXX เพื่อเป็นตัวแทนของดอลลาร์สหรัฐและคุณสามารถใช้ตัวกรองอื่น ๆ ใน Baidu ด้วยตัวเอง
3. เพิ่มเหตุการณ์
มีหมายเลข +, - ปุ่มและปุ่มลบบนอินเทอร์เฟซปัจจุบัน เหตุการณ์เหล่านี้ค่อนข้างง่าย ใช้ ng-click เพื่อเพิ่มเหตุการณ์คลิกลงในองค์ประกอบ โดยการผ่าน ID ของผลิตภัณฑ์บางอย่างค้นหาผลิตภัณฑ์และเพิ่มลบและลบผลิตภัณฑ์ อย่างไรก็ตามแท็ก ng-disabled จะถูกเพิ่มลงในปุ่ม "-" ตามชื่อเราสามารถนึกถึงแอตทริบิวต์ disabled ของ HTML ได้อย่างง่ายดาย ฟังก์ชั่นของมันคือการปิดใช้งานองค์ประกอบ DOM เมื่อค่าของ ng-disabled เป็นจริง ในทำนองเดียวกัน ng-show ที่ใช้ด้านล่างเหมือนกัน มันจะปรากฏขึ้นเมื่อจริงและซ่อนเมื่อเท็จ หากเป็นตัวเลขมันจะแปลงเป็นค่า boolean โดยอัตโนมัติ 0 เป็นเท็จไม่ใช่ 0 เป็นจริง โปรดทราบว่าตัวเลขติดลบก็เป็นจริงเช่นกัน! - ที่นี่ฉันจะปล่อยให้จำนวน 1 ไม่ลดลงเพราะถ้าตัวเลขมีขนาดเล็กลงมันสามารถลบได้โดยตรง ~
จากนั้นเพิ่มเหตุการณ์ ng-keydown ลงในองค์ประกอบอินพุตเพื่อให้สามารถป้อนปุ่มลูกศร↑→↓←คีย์หมายเลขและ backspace จากนั้นฉันก็ลองและบรรลุเป้าหมาย แต่ฉันสามารถป้อนตัวเลขเช่น "00021" ซึ่งเห็นได้ชัดว่าไม่น่าพอใจ ฉันดูตะกร้าสินค้าของ Taobao และพบว่าเมื่อป้อน 0 ด้านหน้าเนื้อหาของกล่องข้อความนี้จะรีเฟรชโดยอัตโนมัติลบ 0 ก่อนหน้านี้ดังนั้นฉันจึงเพิ่มเหตุการณ์ ng-keyup :
$ scope.quantityKeyUp = ฟังก์ชั่น (เหตุการณ์) {Event = Event || window.event; // เข้ากันได้กับ IE8 หรือต่ำกว่าเป้าหมายยังเป็น var target = event.target || event.srcelement; var keycode = event.keycode; if (48 === keycode || 96 === keycode) {target.value = parseInt (target.value); - ในเวลานี้เมื่อฉันป้อน 0 ค่ากล่องข้อความจะรีเฟรชโดยอัตโนมัติ ทำไมไม่เพิ่มลงใน keydown แต่เพิ่มเหตุการณ์อื่น? นั่นเป็นเพราะค่าของ target.value ยังคงเป็นค่าดั้งเดิมเมื่อเหตุการณ์ keydown ถูกทริกเกอร์และไม่รวมอินพุตคีย์ หลังจาก keydown ค่าเป็นค่าใหม่ ในเวลานี้เราสามารถเรียกเหตุการณ์ keyup เพื่อให้บรรลุเป้าหมายของเรา เราสามารถเปรียบเทียบผลของตะกร้าสินค้า Taobao ฉันคิดว่าประสบการณ์ของฉันดีกว่ามันเพราะตราบใดที่ยังไม่ได้ป้อนในตอนท้ายกล่องข้อความจะสูญเสียโฟกัสไว้เสมอ - -
4. สถิติ
ปริมาณทางสถิติคือการผูกเมธอดโดยตรงและสำรวจอาร์เรย์เพื่อส่งคืนค่า
สำหรับจำนวนเงินทั้งหมดฉันทำการออกแบบที่ลด 10% สำหรับจำนวนรวม 15,000 ใช้ ng-show เพื่อซ่อนจำนวนข้อมูลที่ลดลงทั้งหมด
3. สรุป
มีการใช้อาร์เรย์การสำรวจ forEach จำนวนมากใน JS วิธีการดั้งเดิมใน eCmascript5 คือ array.forEach(function(item,index,array){});
Angular ยังถูกห่อหุ้ม, angular.forEach(array,function(item,index,array){});
ฉันใช้ทั้งสองวิธีในรหัสและฉันไม่รู้ว่าอันไหนมีประสิทธิภาพที่ดี -
ณ จุดนี้ตะกร้าสินค้าเสร็จแล้ว การใช้การผูกสองทางของ Angular คุณสามารถบรรลุการเปลี่ยนแปลงการเชื่อมโยงปริมาณและจำนวนเงินได้อย่างรวดเร็ว ฉันหวังว่าเนื้อหาของบทความนี้จะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและการใช้ Angular หากคุณมีคำถามใด ๆ คุณสามารถฝากข้อความไว้เพื่อสื่อสาร