دعونا نلقي نظرة على الاداءات أولاً:
عربة التسوق
1. الكود
إذا كنت مهتمًا بمعرفة كيفية القيام بذلك بعد قراءة هذا التأثير ، فاستمر في القراءة. ليس كثيرًا ، فقط قم بتحميل الكود.
رمز HTML:
<! doctype html> <html lang = "en" ng-app = "cart"> <head> <meta charset = "utf-8"> <title> عربة التسوق </title> <link rel = "stylesheet" href = "../ scripts/Angular-1.0.4.0-rc.2/docs/components/bootstrap-33.1.1/css/bootstrap.min.css"> <link rel = "stylesheet" <Caption> AngularJS Appleartation Cart </saption> <tr> <th> الرقم التسلسلي </th> <h> معلومات المنتج </th> <th> سعر الوحدة (yuan) </th> <th> الكمية </th> <th> cause (yuan) </th> العملية </th> <tr> <tr ng-repeat = "العنصر"> 1}} </td> <td> <a href = "{{item.linkurl}}" target = "_ blank"> {{item.title}} </a> </td> <td> <td> <td> <td> ng-disabled = "item.quantity <= 1">-</button> <input type = "text" size = "5" ng-model = "item.quantity" ng-keydown = "QuantityKeyDown ()" ng-keyup = "QuantityKeyup () <td> {{item.price*item.quantity | الرقم: 2}} </td> <td> <button type = "button" ng click = "delete (item.id) <span> {{getQuantites ()}} </span> المجموع: <span ng-show = "getTotalAmount () <15000"> {{getTalamount () | number: 2}} </span> <span ng-show = "getTotalAmount ()> = 15000" OFF) </span> <span> ({{getToTalAmount () | الرقم: 2}}) </span> </span> <button type = "button" ng click = "alertsubmit () src = "app.js"> </script> </body> </html>رمز JS:
/تم إنشاؤه بواسطة WQQ في 2016/5/25. /var cartmodule = Angular.module ('cart' ، []) ؛ cartmodule.controller ('cartctr' ، ['$ scope' ، function ($ scope) {$ scope.discount = 0.9 ؛ $ scope.items = [{id: 10001 ، unit: "https://detail.tmall.com/item.htm؟spm=A1Z0D.6639537.19971966601.4.CWYWJS&id=532166746631"} ، {id: 10002 ، العنوان: Macbook Pro "https://detail.tmall.com/item.htm؟spm=A1Z0D.6639537.19971966601.26.CWYWJS&id=4577116847"} ، {id: 10003 ، title: "book i5 128g insiversity: 1108.00 ، 1 ، Linkurl: "https://detail.tmall.com/item.htm؟spm=A1Z0D.6639537.1997196601.15.cwywjs&id=525614504276"} ، {id: 10004 ، ite: الكمية: 1 ، linkurl: (العنصر ، الفهرس ، صفيف) {if (item.id === id) {item.quantity ++ ؛}})} ؛ عدد صحيح غير إيجابي. 105) Target = event.target || id) {if ("تأكيد حذف هذا العنصر من عربة التسوق؟") {الكميات = parseint. $ scope.alertsubmit = function () {Alert ("Angular Passions Cart") ؛2. التحليل
يرجى تجاهل أسلوب bootstrap. نحن نركز فقط على الزاوي. الكود بسيط للغاية. دعونا نحلله بإيجاز:
1. الاستعداد
أولاً ، نحدد وحدة cart ، وحدة التحكم cartCtr ، ونقدمها في رمز HTML. في الوقت نفسه ، نحدد أيضًا items صفيف في JS لمحاكاة الأشياء في عربة التسوق.
2
من أجل اجتياز البيانات ديناميكيًا في items ، نستخدم التعليمات المدمجة ng-repeat في Angular ، والتي يمكن أن تعبر بسهولة الصفيف وإنشاء عناصر DOM . هنا نحلق لإنشاء 4 علامات <tr> :
<tr ng-repeat = "item in antes">
item هو كائن في مجموعة items . هل تشعر أن هذا هو for/in loop في JS؟ ~ إذا كنت مطور .NET واستخدمت ASP.NET MVC Razor ، فأنت على دراية بسلاسة تشغيل عناصر DOM بلغات أخرى. أما إذا كان لدى Java و PHP بناء جملة مماثل ، فأنا لا أعرف. أنا مطور .NET يعمل بجد.
نانوغرام تكرار
يمكننا أن نرى $index في TD الأول ، والذي هو في ng-repeat ، وليس ما نحدده. قيمتها هي فهرس item الحالي في items ، بدءًا من 0 ، لذلك نستخدم $index+1 كرقم التسلسل ، وغيرها (على غرار item . linkUrl ) ربط بيانات.
استخدمنا {{xxx | رقم: 2}} في سعر الوحدة وأعمدة المبلغ. هذا مرشح في الزاوي. وظيفتها هي الحفاظ على القيمة السابقة xxx أماكن عشرية. بالنسبة للمبلغ ، يجب أن نكون بالطبع أكثر دقة. قلت للتو إن هذا مرشح ، لذلك هناك أشياء أخرى ، مثل currency . يمكنك إضافة رمز $ أمام xxx لتمثيل الدولارات الأمريكية ، ويمكنك استخدام مرشحات أخرى على Baidu بنفسك.
3. إضافة الأحداث
هناك رقم +، أزرار وأزرار حذف على الواجهة الحالية. هذه الأحداث بسيطة نسبيا. استخدم ng-click لإضافة أحداث النقر فوق العنصر. من خلال تمرير معرف منتج معين ، ابحث عن المنتج ، وإضافة وطرح وحذف المنتج. ومع ذلك ، تتم إضافة علامة ng-disabled إلى الزر "-". وفقًا للاسم ، يمكننا بسهولة التفكير في السمة disabled لـ HTML. تتمثل وظيفتها في تعطيل عنصر DOM عندما تكون قيمة ng-disabled صحيحة. وبالمثل ، ng-show المستخدم أدناه هو نفسه. يتم عرضه عندما يكون صحيحًا ومخفيًا عندما يكون خطأ. إذا كان رقمًا ، فسيتم تحويله تلقائيًا إلى قيمة boolean . 0 خطأ ، غير صحيح. لاحظ أن الأرقام السلبية صحيحة أيضًا! . هنا سأترك عدد 1 لا يتم تقليله ، لأنه إذا كان الرقم أصغر ، فيمكن حذفه مباشرة ~
ثم أضف حدث ng-keydown إلى عنصر الإدخال بحيث لا يمكنه سوى إدخال مفاتيح الأسهم ↑ → ↓ ← ومفاتيح الأرقام والمساحة backspace . ثم حاولت وحققت الهدف ، لكن يمكنني إدخال أرقام مثل "00021" ، والتي من الواضح أنها لم تكن مرضية. نظرت إلى عربة التسوق في Taobao ووجدت أنه عندما يتم إدخال 0 في المقدمة ، سيتم تحديث محتوى مربع النص هذا تلقائيًا ، وإزالة 0 السابق ، لذلك أضفت حدث ng-keyup :
$ scope.quantityKeyup = function (event) {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 ٪ مقابل إجمالي 15000. استخدم ng-show لإخفاء المبلغ الإجمالي للمعلومات المخفضة.
3. ملخص
يتم استخدام عدة صفائف اجتياز forEach في JS. الطريقة الأصلية في ecmascript5 هي array.forEach(function(item,index,array){});
Angular أيضًا مغلف ، angular.forEach(array,function(item,index,array){});
لقد استخدمت كلتا الطريقتين في الكود ، ولا أعرف أيهما يتمتع بأداء جيد. .
في هذه المرحلة ، تم الانتهاء من عربة التسوق. باستخدام ربط Angular ثنائي الاتجاه ، يمكنك تحقيق تغيير ارتباط الكمية والكمية بسرعة. آمل أن يكون محتوى هذه المقالة مفيدًا لتعلم الجميع واستخدام Angular. إذا كان لديك أي أسئلة ، فيمكنك ترك رسالة للتواصل.