초보자 Angularjs는 여가 시간에 작은 사례를 만들었습니다.
기능 : 쇼핑 카트 품목의 가격을 계산하고 쇼핑 카트 품목을 삭제하십시오.
다음은 완전한 사례입니다 (jQuery 및 AngularJS는 스스로 소개해야합니다)
<! docType html> <html ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> 제목의 문서 </title> <style> .cursors {cursor : pointer} </style> <script src = "js/jquery-1.11.js"> </script> </script src = "js/angular.min.js"> </script> <cript> var a = angular.module ( 'myApp', []); // 쇼핑 카트 플러스 a.directive ( 'myAdds', function () {링크 : 함수 (스코프, 요소, attr) {function () {var this = thisangular.foreach (scope.datalist, function (data, index, array) {if (attr.items == data.items) {data.num = parseint (data.num) +1; scope.allPrices (); scope. $ apply () // 새로 고침보기}); a.directive ( 'myminus', function () {return {link : function (scope, element, att Product ')) {data.num = 0; $ (this) .Siblings ('input '). val (0); scope.allprices (); scope. $ apply (); // delete Array [index]; scope.datalist.splice (index, 1) $ (this) .parents ( 'tr'). remove ();}} else {data.num = parseint (data.num) -1;}; scope.allprices (); scope. $ appl ();}};}}}) // select, select, select a.directive ( 'allorcan', function () {return function (scope, element, attr) {emeter.click (function () {var ischeck = $ (this) .find ( 'input'). prop ( 'checked'); if (ischeck) {$ ( 'input [type = checkbox]'). prop ( 'checked', true);} else {$ [type = checkbox] ') ( 'checked', false);} angular.foreach (scope.datalist, function, function (data, index, array) {data.bol = ischeck;}) scope.allprices (); scope. $ apply ();}})) // 단일 선택 a.directive ( 'onecheck', function () {elecult, attrice (element.) 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 ()})});}));}});}}))))));}});}}); 'myangular', [$ scope ','$ scope, $ filter) {$ scope = [$ scope = // datalized CART {bol : 'false', name : '세탁기', num : '1', 항목 : '0', oneprice : '900', price : ''}, {bol : 'false', name : 'Water 히터', '온수기', '1', 항목 : '1', oneprice : '110', price : ''}, 'fally :'false : 'air 컨디셔너 ', num :'1 ', 항목 :'2 ', oneprice :'116 ', price :' '}, {bol :'false ', name :'냉장고 ', num :'1 ','3 ', oneprice :'2087 ',' '}, {bol :'false ','name : 'enduction 쿠커 ', num :'1 ', 항목 :'4 ', oneprice :'135 ', price :' '}, {bol :'false ', 이름 :'quilt ', num :'1 ', 항목 :'5 ', oneprice :'50 ', price :' '}, {bol :'false ', name :'book ','book ', num :'1 ','6 ', oneprice :'2 ', price :' '}, {bol :'false ','펜 ','1 ','7 ', Oneprice :' 115 ', 가격 :' '}, {bol :'false ', name :'cup ', num :'1 ', items :'8 ', oneprice :'12 ', price :' '}, {bol :'false ','book ','num : '1', 항목 : '9', oneprice : '5', price : '' ' }, {bol : 'false', name : 'snum :'1 ', 항목 :'10 ', oneprice :'13 ', 가격 :' '}]; // 총 가격 계산 $ 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);})); price $ 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> <td> <label all-orcan> <input type = "checkbox"> all/delect </label> </td> <td> name </td> <td> 수량 </td> <td ng-click = 'cartsort ( "oneprice")> <td> <td> </tr> <tr ng-repeat = "datalist의 데이터"> <td> <input type = "checkbox"one-check items = {{data.items}}> </td> <td ng-cloak> {{data.name}}}}}}}}}} <input type = "text"ng-model. 항목 = "{{data.items}}"> <button my-adds items = "{{{data.items}}"ng class = "{cursors : true}">+</button> <버튼 my-minus items = "{data.items}"ng class = "{cursors : true}"> ng-cloak> {{data.oneprice}} </td> <td ng-cloak> {{data.price}} </td> </tr> </table> <div> 총 가격 : {allprices ()}}}}}}}} </div> </body> </html> <script (0) </script> ~ </script> </script> </script> </script>효과는 그림에 나와 있습니다.
노동의 결과를 존중하십시오. 재 인쇄시 소스를 표시하십시오 (http://blog.csdn.net/sllailcp/article/details/47833315).