Давайте сначала посмотрим на визуализации:
Корзина
1. Код
Если вы заинтересованы в том, чтобы узнать, как это сделать после прочтения этого эффекта, продолжите чтение. Не много, просто загрузите код.
HTML -код:
<! Doctype html> <html lang = "en" ng-app = "cart"> <head> <meta charset = "utf-8"> <title> корзина по магазинам </title> <link rel = "stylesheet" href = "../ scripts/angular -1.4.0-rc.2/docs/components/bootstrap-3.1.1/css/bootstrap.min.css"> <link rel = "stylesship" href = "main.css"> </head> <body ng-controler = "cartctr"> <table ng-show = "steclege. Реализация Cart </caption> <tr> <th> серийный номер </th> <Th> Информация о продукте </th> <Th> цена единицы (yuan) </th> <Th> Количество </th> <Th> SUMT (YUAN) </th> <Th> Операция </th> </tr> <trng-repeat = intemb <td> <a href = "{{item.linkurl}}" target = "_ blank"> {{item.title}} </a> </td> <td> {{item.price | number: 2}} </td> <td> <type = "ng-click =" READ (item.id) ng-disabled="item.quantity<=1">-</button> <input type="text" size="5" ng-model="item.quantity" ng-keydown="quantityKeydown()" ng-keyup="quantityKeyup()"> <button type="button" ng-click="add(item.id)">+</button> </td> <Td> {{item.price*item.quantity | number: 2}} </td> <td> <кнопка типа = "кнопка" ng-click = "delete (item.id)"> delete </button> </td> </tr> </table> <div ng-shef = "! <pan> {{getQuantites ()}} </span> total: <span ng-shew = "getTotalAmount () <15000"> {{getTotalAlamount () | number: 2}} </span> <span ng-shew = "getTotalAlamount ()> = 15000"> {{getTotalAlAmount ()*Discount | number: 2}} <pan> (10% скидка) </span> <pan> ({{getTotalAlamount () | номер: 2}}) </span> </span> <button Type = ng-click = "alertsubmit ()"> chockout </button> </div> src = "../ scripts/angular -1.4.0-rc.2/angular.js"> </script> <script 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. "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.4 "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.26.cwywjs&id=45771116847"}, {id: 10003, название: "Поверхностная книга I5 128G Независимая графика: 1, Linkurl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.15.cwywjs&id=525614504276"}, {id: 10004, название: "lenovo yoga3pro I5PRO I5PRO". Количество: 1, Linkurl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.37.cwywjs&id=41541519814"}]; Index, Array) {if (item.id === ID) {item.quantity ++;}})}; Неположительный целое число 105) || target = event.target || event.srcelement; ID) {if («Подтвердить, чтобы удалить этот элемент из корзины?») (item.quanty) };2. Анализ
Пожалуйста, игнорируйте стиль начальной загрузки. Мы сосредотачиваемся только на угловых. Код очень прост. Давайте кратко проанализируем это:
1. Подготовьте
Сначала мы определяем модуль cart , контроллер cartCtr и вводим их в HTML -код. В то же время мы также определяем items в JS, чтобы имитировать вещи в корзине.
2. итератор NG-Repeat
Чтобы динамически пересекать данные в items , мы используем встроенную инструкцию ng-repeat в угловой, которая может легко пройти массив и генерировать элементы DOM . Здесь мы зацикливаемся, чтобы генерировать 4 <tr> теги:
<tr ng-repeat = "item в элементах">
item является объектом в массиве items . DOM ли вы, что это for/in цикле в JS? Что касается того, есть ли у Java и PHP подобный синтаксис, я не знаю. Я трудолюбивый разработчик .NET.
NG-повторный итератор
Мы видим $index используется в первом TD, который находится в ng-repeat , а не то, что мы определяем. Его значение является индексом текущего item в items , начиная с 0, поэтому мы используем $index+1 в качестве номера последовательности и другие (аналогично item . linkUrl ) привязку данных.
Мы использовали {{xxx | Number: 2}} в столбцах цены и суммы. Это фильтр в угловом. Его функция состоит в том, чтобы сохранить предыдущее значение xxx в два десятичных значения. Что касается суммы, мы, конечно, должны быть более точными. Я только что сказал, что это фильтр, так что есть и другие вещи, такие как currency . Вы можете добавить символ A $ перед XXX, чтобы представлять доллары США, и вы можете использовать другие фильтры на Baidu самостоятельно.
3. Добавить события
Есть номер +, - кнопки и кнопки удаления на текущем интерфейсе. Эти события относительно просты. Используйте ng-click , чтобы добавить события Click в элемент. Пропустив идентификатор определенного продукта, найдите продукт и добавьте, вычтите и удалите продукт. Тем не менее, тег ng-disabled добавляется в кнопку «-». Согласно названию, мы можем легко придумать атрибут disabled HTML. Его функция заключается в отключении элемента DOM , когда значение ng-disabled является истинной. Точно так же, ng-show используемый ниже, одинаково. Он отображается, когда TRUE и спрятан, когда FALSE. Если это число, он автоматически преобразуется в boolean значение. 0 неверно, не 0 верно. Обратите внимание, что отрицательные числа также верны! Полем Здесь я позволю номеру 1 не будет уменьшено, потому что, если число меньше, его можно удалить напрямую ~
Затем добавьте событие ng-keydown в входной элемент, чтобы оно могло ввести только клавиши со стрелками ↑ → ↓ ←, номерные клавиши и backspace . Затем я попытался и достиг цели, но я мог ввести цифры, такие как «00021», что, очевидно, не было удовлетворительным. Я посмотрел на корзину покупок Таобао и обнаружил, что когда 0 введено впереди, содержание этого текстового поля автоматически обновляется, удаляя предыдущие 0, поэтому я добавил событие ng-keyup :
$ scope.quantitykeyup = function (event) {event = event || window.event; // Совместим с IE8 или ниже, Target также VAR Target = Event.Target || Event.srcelement; var keycode = event.keycode; if (48 === KeyCode || 96 === KeyCode) {target.value = parseint (target.value); }}; В настоящее время, когда я введен 0, значение текстового поля автоматически обновляется. Почему бы не добавить его в keydown , но добавить другое событие? Это связано с тем, что значение target.value Value по -прежнему остается исходным значением, когда событие keydown запускается, а ввод ключа не включен. После keydown значение является новым значением. В настоящее время мы можем затем запустить событие keyup для достижения нашей цели. Мы можем сравнить влияние корзины для покупок Taobao. Я думаю, что мой опыт лучше, чем он, потому что до тех пор, пока он не введен в конце, текстовое поле всегда потеряет фокус. Полем Полем
4. Статистика
Статистическая величина должна напрямую связывать метод и пересечь массив, чтобы вернуть значение.
Для общей суммы я сделал дизайн, скидка 10% на общую сумму 15 000. Используйте ng-show , чтобы скрыть общее количество дисконтированной информации.
3. Резюме
Несколько массивов обхода forEach используются в JS. Настоящим методом в Ecmascript5 является array.forEach(function(item,index,array){});
Угловой также инкапсулируется, angular.forEach(array,function(item,index,array){});
Я использовал оба метода в коде, и я не знаю, у кого есть хорошая производительность. Полем
На этом этапе корзина покупок была завершена. Используя двустороннее привязку Angular, вы можете быстро достичь изменения сцепления количества и количества. Я надеюсь, что содержание этой статьи будет полезно для каждого обучения и использования угловых. Если у вас есть какие -либо вопросы, вы можете оставить сообщение для общения.