قام المبتدئون AngularJS بحالة صغيرة في وقت فراغهم.
الوظيفة: حساب سعر عناصر عربة التسوق وحذف عناصر عربة التسوق.
فيما يلي الحالة الكاملة (يجب تقديم jQuery و AngularJs بأنفسهم)
<! doctype html> <html ng-app = "myapp"> <head> <meta charset = "utf-8" <title> und unded document </title> <style>. src = "js/angular.min.js"> </script> <script> var a = Angular.Module ('myapp' ، []) ؛ هذا = thisangular.foreach (scope.datalist ، الوظيفة (البيانات ، الفهرس ، المصفوفة) {if (attr.items == data.items) {data.num = parseint (data.num) +1 ؛ scope.Allprices () ؛ scope. A.DiRective ('myminus' ، function () {return {link: function (scope ، element ، attr) {element.click (function () {var this = thisangular.foreach (scope.datalist ، function (data ، index ، array) {if (attr.items == data.items) المنتج ')) {data.num = 0 ؛ $ (this) .siblings (' input '). val (0) ؛ Scope.Allprices () ؛ Scope. $ application () ؛ // delete صفيف [index] ؛ scope.datalist.splice (index ، 1) $ (this) .parents ('tr'). remove () ؛}} else {data.num = parseint (data.num) -1 ؛ A.Directive ('allorcan' ، function () {return function (scope ، element ، attr) {element.click (function () {var isCheck = $ (this) .find ('input'). prop ('checked') ؛ if (iScheck) {$ ('input [type = checkbox]'). prop ('checked' ، true) ؛} else {$ ('type = checkbox]'). not ('$ [type = checkbox]'). e eq (0)). prop ('checked' ، false) ؛} Angular.foreach (scope.datalist ، الوظيفة (البيانات ، الفهرس ، الصفيف) {data.bol = iScheck ؛}) Scope.AllPrices () ؛ Scope. $ application () هذا = thisangular.foreach (scope.datalist ، الدالة (البيانات ، الفهرس ، المصفوفة) {if (attr.items == data.items) {var isCheck = $ (this) .prop ('checked') ؛ data.bol = iScheck ؛ scope.allprices () ؛ scope. $ application () ؛}}) ؛}}) العربة {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" ، السعر: "} ، {bol:" false "، الاسم:" المحفزة طباخ '، num:' 1 '، العناصر:' 4 '، oneprice:' 135 '، السعر:' '} ، {bol:' false '، name:' Quilt '، num:' 1 '، العناصر: "5 "، OnePrice:" 50 "، السعر:"} ، {bol: 'false' ، الاسم: 'Book' ، num: '1' ، العناصر: '6' ، oneprice: '2' ، السعر: ''} ، {bol: 115 '، السعر:' '} ، {bol:' false '، name:' cup '، num:' 1 '، العناصر:' 8 '، oneprice:' 12 '، السعر:'} ، {bol: 'false' ، الاسم: } ، {bol: 'false' ، الاسم: 'snum:' 1 '، العناصر:' 10 '، oneprice:' 13 '، السعر:' '}] ؛ // حساب السعر الإجمالي $ scope.allprices = function () {$ scope.allprice = 0 ؛ angular.foreach ($ scope.datalist ، function (data ، index ، array) {data.price = data.num*data.OnePric Price $ scope.cartsort = function (arg) {Angular.foreach ($ scope.datalist ، function (data ، index ، array) {enduces.callee ['cartsort ('+arg+')'] =! edation.c allee ['cartsort ('+arg+')'] $ scope ng-controller = "myangular"> <tabl> <tr> <td> <label all-orcan> <input type = "checkbox" <tr ng-repeat = "data in dataalist"> <td> <type type = "checkbox" One-check head = {{data.items}}> </td> <td ng-cloak> {{data.name}} </td> <td> <twis type = "text" ng-cloak-model = "data.num" العناصر = "{{data.items}}}"> <زر my-my-adds = "{{data.items}}" ng-class = "{{true}" ng-cloak> {{data.oneprice}} </td> <td ng-cloak> {{data.price}} </td> </tr> </lood> <div> السعر الإجمالي: {{allprices ()}} </div> </html>يظهر التأثير في الشكل:
احترام نتائج العمل. يرجى الإشارة إلى المصدر عند إعادة الطباعة (http://blog.csdn.net/sllailcp/article/details/47833315) ...