Les débutants Angularjs ont fait un petit cas pendant leur temps libre.
Fonction: Calculez le prix des articles de panier et supprimez les articles de panier.
Ce qui suit est le cas complet (JQuery et AngularJS doivent être introduits par eux-mêmes)
<! doctype html> <html ng-app = "myApp"> <éad> <meta charset = "utf-8"> <t titre> un document intitulé </ title> <style> .cursors {cursor: pointer} </ style> <script src = "js / jQuery-1.11.1.js"> </cript> src = "js / angular.min.js"> </ script> <cript> var a = angular.module ('myApp', []); // Cart de shopping plus a.directive ('myAdds', function () {return {link: function (scope, élément, att) {élément.click (function () {var: function (scope, élément, att) {élément.click (function () {var: function (scope, élément, att) {élément.click (function () {var: function (scope, élément, att) This = thisangular.forEach (scope.datalist, function (data, index, array) {if (att.items == data.items) {data.num = parseInt (data.num) +1; scope.allprices (); scope. $ Applique () // A.directive ('myminus', function () {return {link: function (scope, élément, att) {element.click (function () {var this = thisangular.foreach (scope.datalist, function (data, index, array) {if (att.items == data.items) {if (data.Num <= 1) {if (confirmer (confirmer (où dere Product ')) {data.num = 0; $ (this) .sibllings (' entrée '). Val (0); scope.allprices (); scope. $ applique (); // supprimer array[index];scope.dataList.splice(index,1)$(This).parents('tr').remove();}}else{data.num=parseInt(data.num)-1;};scope.allPrices();scope.$apply();}});});} }})//Select all, do not select A.directive ('allorCan', function () {return function (scope, élément, attr) {element.click (function () {var isCheck = $ (this) .find ('input'). prop ('coché'); if (isCheck) {$ ('input [type = checkbox]'). Prop ('vérifié', true);} else {$ ('entrée [Type = Checkbox]'). ('vérifié', false);} angular.ForEach (scope.datalist, fonction (data, index, array) {data.bol = ischeck;}) scope.allprices (); scope. $ applique ();})}}) // single-choice a.Directive ('onecheck', fonction () {return function (scope, élément, élément) {élément. This = thisangular.ForEach (scope.datalist, fonction (données, index, array) {if (att.items == data.items) {var isCheck = $ (this) .prop ('checked'); data.bol = ischeck; scope.allprices (); scope. $ applique ();}})});}}) a.Controller ('myangular', [$ scope ',' $ filter ', function ($ Scope, $ filter) {$ scope. Cart {bol: 'false', name: 'Washing Machine', num: '1', items: '0', oneprice: '900', prix: ''}, {bol: 'false', nom: 'Water Habin conditionner ', num:' 1 ', items:' 2 ', oneprice:' 116 ', prix:' '}, {bol:' false ', name:' réfrigérateur ', num:' 1 ', items:' 3 ', oneprice:' 2087 ', prix:' '}, {bol:' false ', name:' induction Cooker ', num:' 1 ', éléments:' 4 ', oneprice:' 135 ', prix:' '}, {bol:' false ', nom:' quilt ', num:' 1 ', items:' 5 ', OnePrice:' 50 ', prix:' '}, {bol:' false ', nom:' book ', num:' 1 ', items:' 6 ', oneprice:' 2 ', prix:' '}, {bol:' false ', name:' Pen ', num:' 1 ', iteles:' 7 ', oneprice:' 115 ', Price:' '}, {bol:' false ', nom:' Cup ', num:' 1 ', items:' 8 ', oneprice:' 12 ', prix:' '}, {bol:' false ', nom:' book ', num:' 1 ', items:' 9 ', oneprice:' 5 ', prix:' ' }, {Bol: 'false', nom: 'snum:' 1 ', articles:' 10 ', oneprice:' 13 ', prix:' '}]; // calcul du prix 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 + = parseIntre (sort);}}) return $ scope.allpride; Price $ scope.cartsort = fonction (arg) {angular.ForEach ($ scope.datalist, fonction (data, index, array) {arguments.callee ['cartsort (' + arg + ')'] =! arguments.c Allee ['Cartsort (' + arg + ')'] $ scope.datalist = $ filter ('OrderBy') ($ scope.datalist, arg, arguments.callee ['cartsort (' + arg + ')'])})}) </ script> </ head> <body ng-controlller = "myangular"> <s table> <tr> <td> <étiqueter all-orcan> <entrée type = "checkbox"> Sélectionnez tout / annuler la quantité </ td> <td> <td> name </td> <td> Quantity </td> <td ng-click = 'cartsort ("oneprice")'> </ tr> <tr ng-repeat = "Données dans Datalist"> <td> <entrée type = "Checkbox" items One-Check = {{data.items}}> </td> <td ng-coak> {{data.name}} </td> <td> <entrée = "Text" ng-co-coak ng-model = "Data.Num" items = "{{data.items}}"> <Button My-Adds items = "{{data.items}}" ng-class = "{curseurs: true}"> + </ bouton> <Button My-Minus Items = "{{data.items}}}" Ng-Class = "{Cursors: true}"> ng-coak> {{data.oneprice}} </td> <td ng-coak> {{data.price}} </td> </tr> </s table> <v>L'effet est illustré sur la figure:
Respecter les résultats du travail. Veuillez indiquer la source lors de la réimpression (http://blog.csdn.net/sllailcp/article/details/47833315) ...