Anfänger AngularJs machten in ihrer Freizeit einen kleinen Fall.
Funktion: Berechnen Sie den Preis von Einkaufswagenartikeln und löschen Sie Einkaufswagenartikel.
Das Folgende ist der vollständige Fall (JQuery und AngularJs müssen von sich selbst eingeführt werden)
<! docType html> <html ng-App = "MyApp"> <head> <meta charset = "utf-8"> <title> bis betitelte Dokument </title> <Stylors> .cursors {cursor: pointer} </style> <cript src = "jquery-1.11.1.1.1.1.1.1.1.1.1.1.1.js"> </</script src = "js/angular.min.js"> </script> <script> var a = angular.module ('MyApp', []); // Einkaufswagen plus a.directive ('myAdds', function () {return {link: function (Scope, Element, attr) {element.click (function () {) {var var var var {var var This = thisangular.foreach (Scope.Datalist, Funktion (Daten, Index, Array) {if (attr.items == data.items) {data.num = parseInt (data.num) +1; scope.allprices (); Scope. A.directive('myMinus',function(){return {link:function(scope, element, attr){element.click(function(){var This=thisangular.forEach(scope.dataList,function(data,index,array){if(attr.items==data.items){if(data.num<=1){if(confirm('Where to delete this Produkt ')) {data.num = 0; Array [index]; scope.datalist.SPLICE (INDEX, 1) $ (this) .Parents ('tr'). remove ();}} else {data.num = parseInt (data.num) -1;}; scope.allprices (); scope. A.directive ('Allorcan', function () {return function (Scope, Element, attr) {element.click (function () {var ISSCECK = $ (this) .find ('Eingabe'). prop ('checked'); if (iSceck) {$ ('input [type = pookBox]'). prop ('checked', true);} else {$ ('Eingabe [type = checkbox]') . This = thisangular.foreach (Scope.Datalist, Funktion (Daten, Index, Array) {if (attr.items == data.items) {var ISSCECK = $ (this) .Prop ('Checked'); Data.bol = IsShEck; Scope.Allprices (); Scope. $ anwenden ();}})});}}) A.Controller ('myangular', ['$ scope', '$ filter', Funktion ($ $ filter) {$ scope. CART {Bol: 'False', Name: 'Waschmaschine', num: '1', Artikel: '0', Oneprice: '900', Preis: ''}, {bol: 'false', name: 'Warmwasserbereiter', n um: '1', Artikel: '1', Oneprice: '110, Price:'}, {boL: {false ', name', name ',', name ',', name ',', name: Conditioner ', num:' 1 ', Artikel:' 2 ', OnePrice:' 116 ', Preis:' '}, {bol:' false ', Name:' Kühlschrank ', num:' 1 ', Artikel:' 3 ', Oneprice:' 2087 ', Preis:' '}, {bol:' false ', Name:' Induktion Cooker ', num:' 1 ', Artikel:' 4 ', Oneprice:' 135 ', Preis:' '}, {bol:' false ', Name:' Quilt ', num:' 1 ', Artikel:' 5 ', Oneprice:' 50 ', Preis:' '}, {bol:' false ', Name:' Buch ', num:' 1 ', Artikel:' 6 ', OnePrice:' 2 ', Preis:' '}, {bol:' false ', name:' pen ', num:' 1 ', items: 7', Oneprice: 'false:' 115 ', Preis:' '}, {Bol:' False ', Name:' Cup ', num:' 1 ', Artikel:' 8 ', OnePrice:' 12 ', Preis:' '}, {bol:' false ', name:' buch ', num:' 1 ', items:' 9 ', Oneprice:' 5 ', Price:' '' '' }, {Bol: 'False', Name: 'Snum:' 1 ', Artikel:' 10 ', OnePrice:' 13 ', Preis:' '}]; // Berechnung des Gesamtpreises $ 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); Preis $ scope.cartsort = function (arg) {angular.foreach ($ scope.datalist, Funktion (Daten, Index, Array) {Argumente.Callee ['Cartsort ('+arg+')'] =! Argumente.c Allee ['cartsort ('+arg+')'] $ scope.datalist = $ filter ('orderBy') ($ scope.datalist, arg, argumente.callee ['cartsort ('+arg+')']})}) </script> </head> <Body ng-controller = "myangular"> <table> <tr> <td> <label All-orcan> <Eingabe-Typ = "Kontrollkästchen"> Alle ausgewählten/abbrechen alle </label> </td> <td> Name </td> <td> Quantität </td> <td ng-click = 'cartsort ("td> </td> <td> <td> <td> </td> </t> </Teprice")' ')' '' '' '' '' '' '' '' '' '', '' '' '', '' '', '' ', "). <tr ng-Repeat = "Daten in Datalist"> <td> <Eingabe type = "CheckBox" Ein-Check-Elemente = {{Daten.Items}}> </td> <td ng-cloak> {{{data.name}} </td> <td> <input type = "text" ng-clakak ng-model = "data.num". items = "{{data.items}}"> <button my-adds items = "{{data.items}}" ng-class = "{cursors: true}">+</button> <button my-minus items = "{{{Data.Items}}}}}" ng-class = "{curss: true}" ng-cloak> {{data.oneprice}} </td> <td ng-cloak> {{data.price}} </td> </tr> </table> <div> Gesamtpreis: {{{Allprices ()} </div> </body> </html> <!-<!-<!-<!-<!Der Effekt ist in der Abbildung dargestellt:
Respektieren Sie die Ergebnisse der Arbeit. Bitte geben Sie die Quelle beim Nachdruck an (http://blog.csdn.net/sllailcp/article/details/47833315) ...