Angular实现可删除并计算总金额的购物车功能示例
本文实例讲述了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程序设计有所帮助。
赞 (0)