Vamos dar uma olhada nas renderizações primeiro:
Carrinho de compras
1. Código
Se você estiver interessado em saber como fazer isso depois de ler esse efeito, continue lendo. Não muito, basta fazer o upload do código.
Código HTML:
<! Doctype html> <html lang = "en" ng-app = "carrinho"> <head> <meta charset = "utf-8"> <title> carrinho de compras </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-shortllS. <Cegution> AngularJS Implementation Cart </gendion> <tr> <th> Número de série </th> <th> Informações sobre o produto </th> <th> Preço unitário (yuan) </th> <th> Quantidade </th> <Th> (yuan) </s> <th> operação <//</th> <Th>) itens (yuan) </th> <th> <//> </th> <Th> (th) {th) 1}} </td> <td> <a href = "{{item.linkurl}}" Target = "_ Blank"> {{item.title}} </a> </td> <td> {{item.price | número: 2}} </td> <td> ng-disabled = "item.quantity <= 1">-</button> <input type = "text" size = "5" ng-model = "item.quantity" ng-keydown = "quantityKeyDown ()" ng-keyup = "quantityKeyUp ()"> <butt = "" "ng-cllick =" add) <Td> {{item.price*item.quantity | número: 2}} </td> <td> <botão tipo = "botão" ng-click = "delete (item.id)"> delete </button> </td> </tr> </tabela <Div ng-shaw = "! Items.lgen> <pan> {{getQuantites ()}} </span> Total: <span ng-show = "getTotalamount () <15000"> {{getToTalamount () | número: 2}}} </span> <span ng-show = "getTotalamount ()> = 15000"> {{{{{{{{{{{{{{{{{{{{{{{{{ OFF) </span> <pan> ({{getTotalamount () | número: 2}}) </span> </span> <botão type = "button" ng-click = "alertSubmit ()"> checkout </button> </div> <script src = "../ scripts/angular-1.4.2.2.2/script </button> </div> src = "App.js"> </script> </body> </html>Código JS:
/Criado pelo WQQ em 2016/5/25. /var cartmodule = angular.module ('carrinho', []); cartmodule.Controller ('Cartctr', ['$ scope', função ($ scope) {$ scope.discount = 0.9; $ scope.items = [{id: 10001, título: "o refruto da web do fruto da web do ladrão integral" "https://detail.tmall.com/item.htm?spm=A1Z0D.6639537.1997196601.4.cwywjs&id=532166746631"}, {id: 10002, título: "MacBook Retina 15666631"}, {id: 10002, título: "MacBook 15 "https://detail.tmall.com/item.htm?spm=A1Z0D.6639537.1997196601.26.cwywjs&id=45771116847"}, {id: 1000, title: "Surface I5 128 128. 1, linkurl: "https://detail.tmall.com/item.htm?spm=A1Z0D.6639537.1997196601.15.cwywjs&id=5256145046"}, {id: 10004, 10004, title: 444, {{Id: 10004, 10004, 444, 1 {Id: 10004, 444: 1 {Id: 10004, 10004, 444, 1 {Id: 10004, 10004, 444, 1 {Id: 10004, 10004, 444, 1 {Id: 10004. 7299.00, Quantidade: 1, Linkurl: "https://detail.tmall.com/item.htm?spm=A1Z0D.6639537.19971966601.37.cwywjs&id=41541519814" angular.foreach ($ scope.items, função (item, índice, array) {if (item.id === id) {item.quantity ++;}})}; // Adicione o evento KeyDown na caixa de entrada para evitar o número inteiro não positivo $ scope.quantityKeydown = function (evento) {Evento = Evento || Window.event; (96 <= KeyCode && KeyCode <= 105) || KeyCode == 8) {// Chave de seta ↑ → (Evento) {Evento = Window.Event; (Item, index) {if (item.id == id) {if (confirmar (confirmar para excluir este item do carrinho de compras? ")) {$ scope.items.splice (Índice, 1); Índice, Array) {if (Item.quantity) {Quantidades += Parseint (Item.quantity); });2. Análise
Por favor, ignore o estilo de bootstrap. Nós apenas nos concentramos no angular. O código é muito simples. Vamos analisá -lo brevemente:
1. Prepare
Primeiro, definimos um módulo cart , controlador cartCtr e os apresentamos no código HTML. Ao mesmo tempo, também definimos uma items em JS para simular as coisas no carrinho de compras.
2. NG-REPEAT ITERATOR
Para atravessar dinamicamente os dados nos items , usamos a instrução interna ng-repeat no Angular, que pode atravessar facilmente a matriz e gerar elementos DOM . Aqui, fazemos um loop para gerar 4 tags <tr> :
<tr ng-repeat = "Item em itens">
item é um objeto na matriz de items . Você acha que este é for/in in js? ~ Se você é um desenvolvedor .NET e já usou o ASP.NET MVC Razor, está familiarizado com a operação perfeita dos elementos DOM em outros idiomas. Quanto a Java e PHP têm sintaxe semelhante, não sei. Eu sou um desenvolvedor .NET trabalhador.
ng-repeat iterator
Podemos ver $index é usado no primeiro TD, que está em ng-repeat , não o que definimos. Seu valor é o índice do item atual nos items , a partir de 0, por isso usamos $index+1 como número de sequência e outros (semelhante ao item . linkUrl ) Ligação de dados.
Utilizamos {{xxx | número: 2}} nas colunas do preço unitário e do valor. Este é um filtro em angular. Sua função é manter o valor anterior xxx dois lugares decimais. Quanto à quantidade, é claro que devemos ser mais precisos. Eu apenas disse que este é um filtro, então há outras coisas, como currency . Você pode adicionar um símbolo $ na frente do XXX para representar dólares americanos e pode usar outros filtros no Baidu sozinho.
3. Adicione eventos
Existem botões número +, - e excluir botões na interface atual. Esses eventos são relativamente simples. Use ng-click para adicionar eventos de clique ao elemento. Ao passar o ID de um determinado produto, encontre o produto e adicione, subtraia e exclua o produto. No entanto, uma tag ng-disabled é adicionada ao botão "-". De acordo com o nome, podemos pensar facilmente no atributo disabled do HTML. Sua função é desativar DOM quando o valor de ng-disabled é verdadeiro. Da mesma forma, ng-show usado abaixo é o mesmo. É exibido quando verdadeiro e oculto quando falso. Se for um número, ele se converterá automaticamente em um valor boolean . 0 é falso, não 0 é verdadeiro. Observe que números negativos também são verdadeiros! . Aqui vou deixar o número de 1 não ser reduzido, porque se o número for menor, ele poderá ser excluído diretamente ~
Em seguida, adicione o evento ng-keydown ao elemento de entrada para que ele possa inserir apenas as teclas de seta ↑ → ∞← ←, teclas de número e backspace . Então eu tentei e atingi a meta, mas pude inserir números como "00021", o que obviamente não era satisfatório. Eu olhei para o carrinho de compras de Taobao e descobri que quando 0 é inserido na frente, o conteúdo desta caixa de texto atualiza automaticamente, removendo o 0 anterior, então adicionei o evento ng-keyup :
$ scope.quantityKeyup = function (event) {event = event || Window.Event; // Compatível com o IE8 ou abaixo, o Target também é VAR Target = Event.Target || Event.srcelement; var keycode = event.keycode; if (48 === keycode || 96 === keycode) {Target.value = parseint (Target.value); }}; No momento, quando eu digito 0, o valor da caixa de texto atualizará automaticamente. Por que não adicioná -lo ao keydown , mas adicionar outro evento? Isso ocorre porque o valor do target.value ainda é o valor original quando keydown é acionado e a entrada de chave não está incluída. Após keydown , o valor é o novo valor. Neste momento, podemos acionar keyup para atingir nosso objetivo. Podemos comparar o efeito do carrinho de compras do Taobao. Eu acho que minha experiência é melhor do que isso, porque, desde que não seja inserida no final, a caixa de texto sempre perderá o foco. . .
4. Estatísticas
A quantidade estatística é ligar diretamente o método e atravessar a matriz para retornar o valor.
Para o valor total, fiz um design com 10% de desconto no valor total de 15.000. Use ng-show para ocultar a quantidade total de informações com desconto.
3. Resumo
Vários matrizes de travessia forEach são usadas em JS. O método nativo no ECMAScript5 é array.forEach(function(item,index,array){});
Angular também é encapsulado, angular.forEach(array,function(item,index,array){});
Usei os dois métodos do código e não sei qual deles tem um bom desempenho. .
Neste ponto, o carrinho de compras foi concluído. Usando a ligação bidirecional do Angular, você pode alcançar rapidamente a mudança de ligação de quantidade e quantidade. Espero que o conteúdo deste artigo seja útil para o aprendizado e o uso de todos. Se você tiver alguma dúvida, pode deixar uma mensagem para se comunicar.