有角度实现可删除并计算总金额的购物车功能示例

本文实例讲述了有角的实现可删除并计算总金额的购物车功能。分享给大家供大家参考，具体如下：

先看运行效果：

具体代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' titlewww.jb51.net angular可删除与计算总额的购物车/title脚本src=' http : angular。量滴js /脚本样式表{宽度： 500像素重量： 300像素边界崩溃：崩溃；文本对齐：中心；} td{ border: 1px纯黑；}/style脚本var myapp=angular。模块(' myapp '，[])；myapp.controller('myCtrl '，函数($ scope){ $ scope。goods=[{ gname : ' iphone 8 '，num:'3 '，price:'999' }，{ gname: 'iphone7 '，num: '4 '，price: '599' }，{ gname: 'iphone6 '，num: '5 '，price: '499' }，$ scope。all sum=function(){ var all price=0；for(var I=0；I $ scope。商品。长；i ){ allPrice=$scope.goods[i].价格*$scope.goods[i].数量；}返回all price }；$ scope。remove=function(index){ if(confirm(')确定移除此项嘛？)){ $scope.goods.splice(索引，1);} if($ scope。商品。length==0){ alter('你的购物车为空');} };})/脚本/头体ng-app=' myapp ' ng-controller=' myCtrl ' table tr TD col span=' 5 '你的购物车td tr td商品名称运输署/运输署数量运输署/运输署单价运输署/运输署小计运输署/运输署操作/TD/tr ng-repeat='货物中的TD { { arr。gname } }/TD TD { { arr。num } }/TD { { arr。价格|货币： '人民币元'元} }/TD { { arr。num * arr。价格|货币： '人民币元'元} }/TD TD button ng-click=' remove($ index ')删除/button/TD/tr TD colspan=' 5 '总金额span ng-bind=' AllSum()|币种： ' RMB ' '/span/TD/tr/table/body/html更多关于AngularJS相关内容感兴趣的读者可查看本站专题： 《AngularJS指令操作技巧总结》 、 《AngularJS入门与进阶教程》 及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。