Angular实现可删除并计算总金额的购物车功能示例
导读：本文共1720字符，通常情况下阅读需要6分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 本文实例讲述了Angular实现可删除并计算总金额的购物车功能。分享给大家供大家参考，具体如下：先看运行效果：具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>www.jb51... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。本文实例讲述了Angular实现可删除并计算总金额的购物车功能。分享给大家供大家参考，具体如下：
先看运行效果：
具体代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>www.jb51.net angular可删除与计算总额的购物车</title> <script src="angular.min.js"></script> <style> table{ width: 500px; height: 300px; border-collapse: collapse; text-align: center; } td{ border: 1px solid black; } </style> <script> var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function ($scope) { $scope.goods=[{ gname:"iphone8", num:"3", price:"999" },{ gname: "iphone7", num: "4", price: "599" },{ gname: "iphone6", num: "5", price: "499" },{ gname: "iphone5", num: "6", price: "399" } ]; $scope.allSum=function () { var allPrice=0; for(var i=0;i<$scope.goods.length;i++){ allPrice+=$scope.goods[i].price*$scope.goods[i].num; } return allPrice; }; $scope.remove=function (index) { if(confirm('确定移除此项嘛？')){ $scope.goods.splice(index,1); } if($scope.goods.length==0){ alter('你的购物车为空'); } }; }) </script></head><body ng-app="myapp" ng-controller="myCtrl"><table> <tr> <td colspan="5">你的购物车</td> <tr> <td>商品名称</td> <td>数量</td> <td>单价</td> <td>小计</td> <td>操作</td> </tr> <tr ng-repeat="arr in goods"> <td>{{arr.gname}}</td> <td>{{arr.num}}</td> <td>{{arr.price|currency:"RMB￥"}}</td> <td>{{arr.num*arr.price|currency:"RMB￥"}}</td> <td><button ng-click="remove($index)">删除</button></td> </tr> <tr> <td colspan="5">总金额<span ng-bind="allSum()|currency:'RMB'"></span></td> </tr></table></body></html>更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
Angular实现可删除并计算总金额的购物车功能示例的详细内容，希望对您有所帮助，信息来源于网络。