Echemos un vistazo a las representaciones primero:
Carro de la compra
1. Código
Si está interesado en saber cómo hacer esto después de leer este efecto, continúe leyendo. No mucho, solo sube el código.
Código HTML:
<! Doctype html> <html lang = "en" ng-apx = "card"> <head> <meta charset = "utf-8"> <title> compras de carrito </title> <link rel = "stylesheet" href = "../ scripts/angular-1.4.0-rc.2/docs/components/bootstrap-3.1.1/css/bootstrap.min.css"> <link rel = "stylesheet" href = "main.css"> </head> <body ng-controller = "carn Cart de implementación </ctiter> <tr> <th> Número de serie </th> <th> Información del producto </th> <th> Price unit (yuan) </th> <th> cantidad </th> <th> montre (yuan) </th> <th> operación </th> </tr> <tr ng-depreat = "ítems en elementos"> <td> {{{{{{{{$ 1}}} </td>} </td>>} </td>>} <td> <a href = "{{item.linkurl}}" target = "_ blank"> {{item.title}} </a> </td> <td> {{item.price | number: 2}}} </td> <td> <button type = "booth" ng-click = "reduce (item.id)") ")") ng-disable = "item.quantity <= 1">-</boton> <input type = "text" size = "5" ng-model = "item.quantity" ng-keykeydown = "cantitykeyWeydown ()" ng-keyp = "cantitykeyUp ()"> <button type = "button" ng-click = "add (item.id)">+</</td> <td> Button> <TD> {{item.price*item.quantity | Number: 2}} </td> <td> <button type = "button" ng-click = "delete (item.id)"> Eliminar </boton> </td> </tr> </table> <div ng-show = "! items.lengthing"> el carro de compras está vacío, busque el bebé </div> <div> <div> <shiv> <siv> productos seleccionados <span> {{getQuantites ()}} </span> total: <span ng-show = "getToTalAmunt () <15000"> {{getToTalAmont () | number: 2}} </span> <span ng-show = "getToTalAdalAntAn apagado) </span> <span> ({{{getToTalAment () | number: 2}}) </span> </span> <botón tipo type = "botón" ng-chick = "alertsubMit ()"> checkout </boton> </div> <script script src = "../ scripts/angular-1.4.0-rc.2/angular.js"> </script <script <script> <script src = "app.js"> </script> </body> </html>Código JS:
/Creado por WQQ en 2016/5/25. /var CartModule = Angular.module ('Cart', []); CartModule.Controller ('CartCtr', ['$ Scope', function ($ Scope) {$ Scope.discount = 0.9; $ scope.items = [{id: 10001, Título: "La fruta de autocompro "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.4.cwywjs&id=5321667466631"}, {id: 10002, título: "MacBook pro retina 15 pulgadas", precio: 160888.00, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1. "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.26.cwywjs&id=45771116847"}, {id: 10003, título: "Surface Book I5 128g Independent Graphics Card", precio: 11088.00, Cuantio: Cuadre: Cuadre: 1,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.15.cwywJs&id=525614504276"}, {id: 10004, title: "Lenovo Yoga3Pro I5 4G",price: 7299.00, Cantidad: 1, Linkurl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.37.cwywjs&id=41541519814"}]; angular.forach ($ scope.items, function (item, index, array) {if (item.id === id) {item.quantity ++;}})}; // Agregue el evento Keydown en el cuadro de entrada para evitar la entrada de Integer no positivo $ Scope.quantityKeyDown = Funcion (event) {Event = Event || (96 <= KeyCode && KeyCode <= 105) || Code de teclas == 8) {// Key de flecha ↑ → ↓, Numeric Keys, Backspace} else {Console.log (KeyCode) (Evento) {Event = Evento || $ scope.items.forEach (function (item, index) {if (item.id == id) {if (confirmar ("confirmar para eliminar este elemento del carrito de compras?")) {$ scope.items.splice (index, 1); return;}}}})}; Angular.ForEach ($ scope.items, function (item, index, array) {if (item.quantity) {cantidades += parseInt (item.quantity);}}) TotalMount += item.quantity * item.price;2. Análisis
Por favor, ignore el estilo de Bootstrap. Solo nos centramos en angular. El código es muy simple. Analicémoslo brevemente:
1. Preparar
Primero definimos un módulo cart , el controlador cartCtr , y los presentamos en el código HTML. Al mismo tiempo, también definimos un items matriz en JS para simular cosas en el carrito de compras.
2. Iterador de repetición
Para atravesar dinámicamente los datos en items , utilizamos la instrucción incorporada ng-repeat en Angular, lo que puede atravesar fácilmente la matriz y generar elementos DOM . Aquí buceamos para generar 4 <tr> etiquetas:
<tr ng-repeat = "elemento en elementos">
item es un objeto en la matriz items . ¿Sientes que este es for/in en JS? ~ Si eres un desarrollador de .NET y has usado ASP.NET MVC Razor, estás familiarizado con la operación perfecta de elementos DOM en otros idiomas. En cuanto a si Java y PHP tienen una sintaxis similar, no lo sé. Soy un desarrollador .NET trabajador.
iterador de repetición
Podemos ver $index se usa en el primer TD, que está en ng-repeat , no en lo que definimos. Su valor es el índice del item actual en items , a partir de 0, por lo que usamos $index+1 como número de secuencia, y otros (similar a item . linkUrl ) enlace de datos.
Utilizamos {{xxx | número: 2}} en las columnas de precio y cantidad unitaria. Este es un filtro en angular. Su función es mantener el valor anterior xxx dos decimales. En cuanto a la cantidad,, por supuesto, debemos ser más precisos. Acabo de decir que este es un filtro, por lo que hay otras cosas, como currency . Puede agregar un símbolo $ frente a XXX para representar dólares estadounidenses, y puede usar otros filtros en Baidu usted mismo.
3. Agregar eventos
Hay botones Número +, - Botones de eliminación en la interfaz actual. Estos eventos son relativamente simples. Use ng-click para agregar eventos de clic al elemento. Al pasar la identificación de un determinado producto, encuentre el producto, y agregue, reste y elimine el producto. Sin embargo, se agrega una etiqueta ng-disabled al botón "-". Según el nombre, podemos pensar fácilmente en el atributo disabled de HTML. Su función es deshabilitar DOM cuando el valor de ng-disabled es verdadero. Del mismo modo, ng-show que se usa a continuación es el mismo. Se muestra cuando es verdadero y oculto cuando se falsa. Si es un número, se convertirá automáticamente en un valor boolean . 0 es falso, no 0 es verdadero. ¡Tenga en cuenta que los números negativos también son ciertos! . Aquí dejaré que el número de 1 no se reduzca, porque si el número es más pequeño, se puede eliminar directamente ~
Luego, agregue el evento ng-keydown al elemento de entrada para que solo pueda ingresar las teclas de flecha ↑ → ↓ ←, Números y backspace . Luego lo intenté y logré el objetivo, pero podría ingresar números como "00021", lo que obviamente no era satisfactorio. Miré el carrito de compras de Taobao y descubrí que cuando se ingresa 0 al frente, el contenido de este cuadro de texto se actualizará automáticamente, eliminando los 0 anteriores, así que agregué el evento ng-keyup :
$ Scope.quantityKeyUp = function (event) {Event = Event || Window.event; // Compatible con IE8 o debajo, el objetivo también es var Target = Event.Target || Event.SrCelement; var keycode = event.keycode; if (48 === Código de teclas || 96 === Código de teclas) {target.Value = parseInt (target.value); }}; En este momento, cuando ingrese 0, el valor del cuadro de texto se actualizará automáticamente. ¿Por qué no agregarlo al keydown pero agregar otro evento? Esto se debe a que el valor de target.value sigue siendo el valor original cuando se activa keydown y la entrada de clave no está incluida. Después keydown , el valor es el nuevo valor. En este momento, podemos activar keyup para lograr nuestro objetivo. Podemos comparar el efecto del carrito de compras Taobao. Creo que mi experiencia es mejor que esta, porque mientras no se ingrese al final, el cuadro de texto siempre perderá el enfoque. . .
4. Estadísticas
La cantidad estadística es unir directamente el método y atravesar la matriz para devolver el valor.
Por la cantidad total, hice un diseño que es 10% de descuento por el monto total de 15,000. Use ng-show para ocultar la cantidad total de información con descuento.
3. Resumen
Varias matrices de transversal forEach se utilizan en JS. El método nativo en ECMAScript5 es array.forEach(function(item,index,array){});
Angular también está encapsulado, angular.forEach(array,function(item,index,array){});
Utilicé ambos métodos en el código, y no sé cuál tiene un buen rendimiento. .
En este punto, el carrito de compras se ha completado. Usando la unión bidireccional de Angular, puede lograr rápidamente el cambio de enlace de cantidad y cantidad. Espero que el contenido de este artículo sea útil para el aprendizaje de todos y el uso de Angular. Si tiene alguna pregunta, puede dejar un mensaje para comunicarse.