Los principiantes Angularjs hicieron un pequeño estuche en su tiempo libre.
Función: Calcule el precio de los artículos del carrito de compras y elimine los artículos del carrito de compras.
El siguiente es el caso completo (JQuery y Angularjs deben ser introducidos por ellos mismos)
<! Doctype html> <html ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> titelado documento </title> <style> .cursors {cursor: pointer} </style> <script src = "js/jQuery-1.11.1.js"> </script> <script. src = "js/angular.min.js"> </script> <scry> var a = angular.module ('myApp', []); // carrito de compras más a.directive ('myadds', function () {return {link: function (spope, scope, element, attr) {element.click (function () {var var) This = thatesangular.ForEach (Scope.Datalist, Function (Data, Index, Array) {if (attr.items == data.Items) {data.num = parseInt (data.num) +1; scope.AllPrices (); Scope. $ Aplication () // Reffresh View}});});}}}) A.directive ('myminus', function () {return {link: function (scope, element, attr) {element.click (function () {var this = thisangular.Foreach (scope.datalist, function (data, index, array) {if (att.items == data.items) {if (data.num <= 1) Producto ')) {data.num = 0; $ (this) .siblings (' entrada '). Val (0); scope.allpices (); alcance. $ Aplicar (); // Eliminar array [index]; scope.datalist.splice (índice, 1) $ (this) .Parents ('tr'). remove ();}} else {data.num = parseInt (data.num) -1;}; scope.AllPrices (); Scope. $ Aplicar ();}});});}}) A.directive ('Allorpan', function () {return function (scope, element, attr) {element.click (function () {var ischeck = $ (this) .find ('input'). prop ('checked'); if (isCheck) {$ ('input [type = checkbox]'). prop ('checked', true);} else {$ ('input [type = checkbox]'). not ($ ('input [type = chechbox]'). eq (0)). PROP ('Checked', False);} Angular.ForEach (Scope.Datalist, Function (Data, Index, Array) {data.bol = isCheck;}) scope.allPrices (); Scope. $ Aplication ();})}}) // Single-Choice A.Directive ('OnCeck', function () {Funcionar de retorno (Scope, Elemento, Elemento ATT) This = thisangular.ForEach (Scope.Datalist, Function (Data, Index, Array) {if (attr.items == data.Items) {var isCheck = $ (this) .prop ('checked'); data.bol = isCheck; scope.allalPrices (); scope. $ Aplication ();}}})});}}) a.controller ('myangular', ['$ cope', '$ filtro', function ($ scope, $ filtre) {$ scope.datalist = [/////inicializando los datos de los datos 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 acondicionador ', num:' 1 ', elementos:' 2 ', OnePrice:' 116 ', precio:' '}, {Bol:' falso ', nombre:' refrigerador ', num:' 1 ', elementos:' 3 ', unprice:' 2087 ', precio:' '}, {bol:' falso ', nombre:' inducción Cooker ', num:' 1 ', elementos:' 4 ', OnePrice:' 135 ', precio:' '}, {Bol:' falso ', nombre:' edredón ', num:' 1 ', elementos:' 5 ', OnePrice:' 50 ', Price:' '}, {Bol:' False ', Nombre:' Libro ', NUM:' 1 ', Artículos:' 6 ', OnePrice:' 2 ', Price:' '}, {Bol:' False ', Nombre:' Pen ', Num:' 1 ', items:' 7 ', OnePrice:' 115 ', precio:' '}, {Bol:' falso ', nombre:' copa ', num:' 1 ', elementos:' 8 ', OnePrice:' 12 ', precio:' '}, {Bol:' falso ', nombre:' Libro ', num:' 1 ', items:' 9 ', OnePrice:' 5 ', precio:' ' }, {Bol: 'falso', nombre: 'Snum:' 1 ', elementos:' 10 ', OnePrice:' 13 ', precio:' '}]; // Cálculo del precio total $ scope.allprices = function () {$ scope.allprice = 0; angular.forEach ($ scope.datalist, function (data, index, array) {data.price = data.num*data.onePrice; if (data.bol == true) {$ scope.allprice+= parseint (data.price);}}}}} $ scope.allprice; sort;};};}; orth. precio $ scope.cartsort = function (arg) {angular.forEach ($ scope.datalist, function (data, index, array) {arguments.callee ['cardsort ('+arg+')'] =! Arguments.c Allee ['CartSort ('+arg+')'] $ scope.datalist = $ filtro ('orderby') ($ scope.datalist, arg, arguments.callee ['cardsort ('+arg+'') '])})}) </script> </head> <body> ng-Controller = "myangular"> <table> <tr> <tr> <td> <label All-Orcan> <input type = "checkbox"> Seleccione All/Cancel All </Label> </td> <td> name </td> <td> Cantidad </td> <td ng-click = 'Cartsort ("onePrice")'> unitar <tr ng -upeat = "data in dataList"> <td> <input type = "checkbox" one-check items = {{data.Items}}> </td> <td ng-cloak> {{data.name}} </td> <td> <input type = "text" ng-cloak-model = "data.num.num" "num "" "" "" elementos = "{{data.Items}}"> <botón my-adds elementos = "{{data.Items}}" ng-class = "{cursors: true}">+</boton> <button my-minus items = "{{data.items}}" ng-class = " ng-cloak> {{data.OnePrice}} </td> <td ng-cloak> {{data.price}}} </td> </tr> </table> <div> total de precio total: {{allPrices ()}} </div> </body> </html> <!-<scrito> alerta (0) </script>El efecto se muestra en la figura:
Respeta los resultados del trabajo. Indique la fuente al reimprimir (http://blog.csdn.net/sllailcp/article/details/47833315) ...