Os iniciantes AngularJs fizeram um pequeno estojo em seu tempo livre.
Função: Calcule o preço dos itens do carrinho de compras e exclua itens de carrinho de compras.
A seguir, é apresentado o caso completo (JQuery e AngularJs precisam ser introduzidos por si mesmos)
<! doctype html> <html ng-app = "myApp"> <head> <meta charset = "utf-8"> <title> unt Document </ititle> <style> .cursors {Cursor: pointer} </style> <script src = "js/jquery-1.1.1.1.JS" src = "js/angular.min.js"> </script> <cript> var a = angular.module ('myApp', []); // carrinho de compras mais a.directive ('myadds', function () {return {link: function: scope, elemento, elemento) {element.click (function () {var {var {var. Este = thisangular.foreach (scope.datalist, function (dados, índice, array) {if (att.items == data.items) {data.num = parseInt (data.num) +1; scope.allprices (); scope. A.directive ('myMinus', function () {return {link: function (escopo, elemento, att) {element.click (function () {var thisangular.foreach (scope.datalist, function (data, index, matriz) {if (att.items == data.items) (se (data.num.num) produto ')) {data.num = 0; $ (this) .siblings (' input ') Array [índice]; Scope.Datalist.Splice (Index, 1) $ (this) .Parents ('tr'). Remow ();}} else {data.num = parseInt (data.num) -1;}; scope.allprices (); scope. $ Aplicação ();}});};};};};};};};};};};};}; A.directive ('allorcan', function () {return function (escopo, elemento, att) {element.click (function () {var ischeck = $ (this) .find ('input'). Prop ('checked'); if (ischeck) {$ ('input [type = caixa de seleção]'). prop ('verificado', true);} else {$ ('input [type = caixa de seleção]'). ($ ('input [type = check]') ('verificado', false);} angular.foreach (scope.datalist, function (dados, índice, array) {data.bol = isCheck;}) scope.allprices (); scope. $ APPL ();})}}}) // single-cloice, a. This = thisangular.foreach (scope.datalist, function (dados, índice, array) {if (att.items == data.items) {var isCheck = $ (this) .Prop ('verificado'); data.bol = isCheck; scope.allprices (); scope. $ apply ();}})});}}) A.Controller ('myangular', ['$ scope', '$ filtro', função ($ de $, de $ filtro) {$ scope. cart{Bol:'false',name:'washing machine',num:'1',items:'0',oneprice:'900',price:''},{Bol:'false',name:'water heater',n um:'1',items:'1',oneprice:'110',price:''},{Bol:'false',name:'air Condicionador ', num:' 1 ', itens:' 2 ', OnePrice:' 116 ', Price:' '}, {Bol:' false ', nome:' geladeira ', num:' 1 ', itens:' 3 ', OnePrice:' 2087 ', preço:'}, {Bol: 'False', nome: 'indução Cooker ', num:' 1 ', itens:' 4 ', OnePrice:' 135 ', Price:' '}, {Bol:' false ', nome:' Quilt ', num:' 1 ', itens:' 5 ', OnePrice:' 50 ', preço:' '}, {Bol:' false ', nome:' livro ', num:' 1 ', itens:' 6 ', OnePrice:' 2 ', Price:' '}, {Bol:' False ', Nome:' Pen ', num:' 1 ', itens:' 7 ', umPRICE:' 115 ', preço:' '}, {Bol:' false ', nome:' cop ', num:' 1 ', itens:' 8 ', OnePrice:' 12 ', Price:' '}, {Bol:' false ', nome:' livro ', num:' 1 ', itens:' 9 ', umprice:' 5 ', preço:' '' }, {Bol: 'false', nome: 'snum:' 1 ', itens:' 10 ', OnePrice:' 13 ', preço:' '}]; // cálculo do preço total $ scope.Allprices = function () {$ scope.allprice = 0; angular.foreach ($ scope.datalist, function (dados, index, array) {data.price = data.num*data.onePrice; if (data.bol == true) {$ scope.allPrice+= parsent (data.price); preço $ scope.cartSort = function (arg) {angular.foreach ($ scope.datalist, function (dados, índice, array) {Argumments.callee ['Cartsort ('+arg+')']] =! argumentos.c allee ['CartSort ('+arg+')'] $ scope.datalist = $ filter ('orderby') ($ scope.datalist, arg, argumentos.callee ['cartsort ('+arg+'))))})}) </script> </head> <corpo ng-CONTROLLER = "myangular"> <table> <tr> <td> <etiqueta All-Ocan> <input type = "caixa de seleção"> selecione All/Cancelar tudo </crety> </td> <td> name </td> <td> quantidade </td> <td ng-click = 'caretsort ("OnePrices) </tr> <tr ng-repeat = "Dados em datalist"> <td> <input type = "Caixa de seleção" itens de verificação única = {{data.items}}> </td> <td ng-cloak> {{data.name}} </td> <td> <input> typet = " itens = "{{data.items}}"> <botão my-adds itens = "{{data.items}}" ng-class = "{cursors: true}">+</button> button my-minus itens = "{{data.items}}}" "ng-cllass =" ng-cloak> {{data.oneprice}} </td> <td ng-cloak> {{data.price}} </td> </tr> </ table> <div> preço total: {{allprices ()}} </div> <//body> </html> <!O efeito é mostrado na figura:
Respeite os resultados do trabalho. Indique a fonte ao reimprimir (http://blog.csdn.net/sllailcp/article/details/47833315) ...