angular+做一个购物车可以删除，计算总额

最新推荐文章于 2022-12-07 20:14:27 发布

C--罗纳尔多

最新推荐文章于 2022-12-07 20:14:27 发布

阅读量407

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/dangai0201/article/details/77970143

版权

html5 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular/angular.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>