Pemula AngularJs membuat kasing kecil di waktu luang mereka.
Fungsi: Hitung harga barang keranjang belanja dan hapus item keranjang belanja.
Berikut ini adalah kasus lengkap (jQuery dan angularjs perlu diperkenalkan sendiri)
<!doctype html><html ng-app="myApp"><head><meta charset="utf-8"><title>Unt titled document</title><style>.cursors{cursor:pointer}</style><script src="js/jquery-1.11.1.js"></script><script src = "js/angular.min.js"> </script> <script> var a = angular.module ('myapp', []); // cartan belanja plus a.directive ('myAdd Ini = thisangular.foreach (scope.datalist, function (data, index, array) {if (attr.items == data.items) {data.num = parseInt (data.num) +1; scope.allprices (); scope. $ Apply ()//Refresh 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 (attr.items == data.items) {if (data, Num <= 1 (ifer. Produk ')) {data.num = 0; $ (ini) .SIBLINGS (' input '). Val (0); scope.allprices (); scope. $ apply (); // hapus array [indeks]; scope.datalist.splice (index, 1) $ (this) .parents ('tr'). remove ();}} else {data.num = parseInt (data.num) -1;}; scope.allprices (); scope. $ apply ();}});}); A.directive ('allorcan', function () {return function (scope, element, attr) {element.click (function () {var isCheck = $ (ini) .find ('input'). prop ('checked'); if (isCheck) {$ ('input [type = centang kotak]'). prop ('checked', true);} else {$ ('input [type = centang kotak]'). not ($ ('input [type = checkbox]'). EQ ('checked', false);} angular.foreach (scope.datalist, function (data, index, array) {data.bol = ischeck;}) scope.allprices (); scope. $ apply ();}}} {element) {element (function) (function) {function () {function () {function () {function) {function) {function) {function) {function) {function) {function) {function) This = thisangular.foreach (scope.datalist, function (data, index, array) {if (attr.items == data.items) {var ischeck = $ (this) .prop ('checked'); data.bol = isCheck; scope.allprices (); scope. $ apply ();}})});}}) a.controller ('myangular', '$ scope', '$ filter', function ($ scope, $ filter) {$ 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 kondisioner ', num:' 1 ', item:' 2 ', oneprice:' 116 ', harga:' '}, {bol:' false ', nama:' kulkas ', num:' 1 ', item:' 3 ', oneprice:' 2087 ', harga:' '}, {bol:' false ', name:' induction cooker ', num:' 1 ', item:' 4 ', oneprice:' 135 ', harga:' '}, {bol:' false ', nama:' quilt ', num:' 1 ', item:' 5 ', OnePrice:' 50 ', Harga:' '}, {bol:' false ', nama:' buku ', num:' 1 ', item:' 6 ', OnePrice:' 2 ', harga:' '}, {bol:' false ', nama:' pena ', num:' 1 ', item:' 7 ', oneprice:' 115 ', harga:' '}, {bol:' false ', nama:' cup ', num:' 1 ', item:' 8 ', oneprice:' 12 ', harga:' '}, {bol:' false ', nama:' buku ', num:' 1 ', item:' 9 ', oneprice:' 5 ',' '' ' }, {Bol: 'false', name: 'snum:' 1 ', item:' 10 ', OnePrice:' 13 ', harga:' '}]; // Perhitungan Total Harga $ 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+dATEPRICE (ife (data); unit Harga $ scope.cartsort = function (arg) {angular.foreach ($ scope.datalist, function (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-controller="myAngular"><table> <tr> <td><label all-orcan><input type="checkbox">Select all/cancel all</label></td> <td>Name</td> <td>Quantity</td> <td ng-click='CartSort("oneprice")'>Unit price</td> <td>Price</td> </tr> <tr ng-repeat = "Data di DataList"> <td> <input type = "centang kotak" item satu-cek = {{data.items}}> </td> <td ng-cloak> {{data.name}} </td> <td> <lput type = "ng-c-clo =" ng-mod "ng-" ng-mod = items = "{{data.items}}"> <tombol my-cadds = "{{{data.items}}" ng-class = "{cursors: true}">+</button> <tombol minus item = "{{{{{{{{{}} {{{{{{{{{{{TEGU>" {{{{{{{{{{{{{{{"ng-class =" ng-cloak> {{data.onePrice}} </td> <td ng-cloak> {{data.price}} </td> </tr> </able> <div> Harga Total: {AllPrices ()} </Div> </body> </html> <) <) <) </div> </body> </html> <) <) <) <) </div> </body> </html> <) <) <) <) </div> </body> </html>Efeknya ditunjukkan pada gambar:
Hormati hasil persalinan. Harap tunjukkan sumber saat mencetak ulang (http://blog.csdn.net/sllailcp/article/details/47833315) ...