ผู้เริ่มต้น AngularJS ทำเคสเล็ก ๆ ในเวลาว่าง
ฟังก์ชั่น: คำนวณราคาของรายการตะกร้าสินค้าและลบรายการตะกร้าสินค้า
ต่อไปนี้เป็นกรณีที่สมบูรณ์ (jQuery และ AngularJs ต้องได้รับการแนะนำด้วยตัวเอง)
<! doctype html> <html ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> unt document </title> <style> .cursors {เคอร์เซอร์: ตัวชี้} </style> src = "js/angular.min.js"> </script> <script> var a = angular.module ('myapp', []); // ตะกร้าสินค้าพร้อม a.directive ('myadds', function () {return {link: link: ขอบเขต, องค์ประกอบ, attr) this = thisangular.foreach (scope.datalist, ฟังก์ชั่น (ข้อมูล, ดัชนี, อาร์เรย์) {ถ้า (attr.items == data.items) {data.num = parseint (data.num) +1; scope.allprices (); a.directive ('myminus', function () {return {link: function (ขอบเขต, องค์ประกอบ, attr) {element.click (function () {var this = thisangular.foreach (scope.datalist, ฟังก์ชั่น (ข้อมูล, ดัชนี, อาร์เรย์) {if (attr.items == data.items) Product ')) {data.num = 0; $ (นี่) .Siblings (' อินพุต '). val (0); scope.AllPrices (); ขอบเขต. $ apple (); // ลบ อาร์เรย์ [ดัชนี]; prope.datalist.splice (ดัชนี, 1) $ (นี่). parents ('tr'). ลบ ();}} else {data.num = parseint (data.num) -1;}; scope.allprices (); a.directive ('allorcan', function () {return function (ขอบเขต, องค์ประกอบ, attr) {element.click (function () {var ischeck = $ (นี่) .find ('อินพุต'). prop ('ตรวจสอบ'); ถ้า (ischeck) {$ ('อินพุต [type = ช่องทำเครื่องหมาย]'). prop ('ตรวจสอบ', จริง); ('ตรวจสอบ', false);} angular.foreach (scope.datalist, ฟังก์ชั่น (ข้อมูล, ดัชนี, อาร์เรย์) {data.bol = ischeck;}) scope.allprices (); ขอบเขต. $ ใช้ ()}}}}) this = thisangular.foreach (scope.datalist, ฟังก์ชั่น (ข้อมูล, ดัชนี, อาร์เรย์) {ถ้า (attr.items == data.items) {var ischeck = $ (นี่) .prop ('ตรวจสอบ'); data.bol = ischeck; scope.allprices (); ขอบเขต. $ ใช้ ();}})});}}) A.controller ('myangular', ['$ scope' รถเข็น {bol: 'false', ชื่อ: 'เครื่องซักผ้า', num: '1', รายการ: '0', oneprice: '900', ราคา: ''}, {bol: 'false', ชื่อ: 'เครื่องทำความร้อนน้ำ', n um: '1', รายการ: '1', oneprice: '110', ราคา: '' คอนดิชั่นเนอร์ ', num:' 1 ', รายการ:' 2 ', onePrice:' 116 ', ราคา:' '}, {bol:' false ', ชื่อ:' ตู้เย็น ', num:' 1 ', รายการ:' 3 ', oneprice:' 2087 ', ราคา:' '}, Cooker ', num:' 1 ', รายการ:' 4 ', OnePrice:' 135 ', ราคา:' '}, {bol:' false ', ชื่อ:' Quilt ', num:' 1 ', รายการ:' 5 ', OnePrice:' 50 ', ราคา:' '}, {bol:' false ', ชื่อ:' หนังสือ ', num:' 1 ', รายการ:' 6 ', oneprice:' 2 ', ราคา:' '}, {bol:' false ', ชื่อ:' ปากกา ', num:' 1 ' 115 ', ราคา:' '}, {bol:' false ', ชื่อ:' cup ', num:' 1 ', รายการ:' 8 ', oneprice:' 12 ', ราคา:' '}, {bol:' false ', ชื่อ:' หนังสือ ', num:' 1 ', รายการ:' 9 ' }, {bol: 'false', ชื่อ: 'snum:' 1 ', รายการ:' 10 ', oneprice:' 13 ', ราคา:' '}]; // การคำนวณราคารวมทั้งหมด $ scope.allPrices = function () {$ scope.allPrice = 0; angular.foreach ($ scope.datalist, ฟังก์ชั่น (ข้อมูล, ดัชนี, อาร์เรย์) {data.price = data.num*data.oneprice; if (data.bol == true) {$ scope ราคา $ scope.cartsort = function (arg) {angular.foreach ($ scope.datalist, ฟังก์ชั่น (ข้อมูล, ดัชนี, อาร์เรย์) {arguments.callee ['cartsort ('+arg+')'] =! Allee ['cartsort ('+arg+')'] $ scope.datalist = $ filter ('orderby') ($ scope.datalist, arg, arguments.callee ['cartsort ('+arg+')'])}) ng-controller = "myangular"> <table> <tr> <td> <label all-orcan> <อินพุต type = "ช่องทำเครื่องหมาย"> เลือกทั้งหมด/ยกเลิกทั้งหมด </label> </td> <td> ชื่อ </td> <td> ราคา </td> <td ng-click = 'cartsort ("oneprice" </tr> <tr ng-repeat = "data in datalist"> <td> <อินพุตประเภท = "ช่องทำเครื่องหมาย" รายการตรวจสอบหนึ่งรายการ = {{data.items}}> </td> <td ng-cloak> {{data.name} </td> <td> items = "{{data.items}}"> <ปุ่ม my-adds item = "{{data.items}}" ng-class = "{เคอร์เซอร์: true}">+</button> <button my-minus item = "{{data.items}} ng-cloak> {{data.oneprice}} </td> <td ng-cloak> {{data.price}} </td> </tr> </table> <div> ราคารวม: {{allprices ()} </div> </body> </html> <!เอฟเฟกต์แสดงในรูป:
เคารพผลลัพธ์ของแรงงาน โปรดระบุแหล่งที่มาเมื่อพิมพ์ซ้ำ (http://blog.csdn.net/sllailcp/article/details/47833315) ...