购物车的删除

最新推荐文章于 2024-04-28 15:38:00 发布

Honey_fag

最新推荐文章于 2024-04-28 15:38:00 发布

阅读量393

点赞数

本文链接：https://blog.csdn.net/Honey_fag/article/details/78012621

版权

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            width: 800px;
            border-collapse: collapse;
            margin: 0 auto;
        }
        th,td{
            border: 1px solid black;
        }
        button{
            background-color: orange;
        }
    </style>
    <script src="angular.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("mycon",function ($scope) {
            $scope.goods=[
                {name:"鼠标",
                     count:1,
                     price:101,
                     zong:101},
                {name:"键盘",
                    count:3,
                    price:601,
                    zong:1833},
                {name:"土机",
                    count:1,
                    price:3001,
                    zong:3001}];

            $scope.zprice=function () {
                $scope.shu=0;
                $scope.num=0;
                for (var i=0;i<$scope.goods.length;i++){
                    $scope.num=$scope.goods[i].zong;
                    $scope.shu=$scope.shu+$scope.num;

                }
                return $scope.shu;
            }
            $scope.del=function ($index) {
                $scope.goods.splice($index, 1);
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="mycon">
    <h4>您的购物车</h4>
    <table>
        <thead>
            <tr>
                <th>商品名称</th>
                <th>数量</th>
                <th>单价</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody ng-repeat="item in goods">
            <tr>
                <td>{{item.name}}</td>
                <td>{{item.count}}</td>
                <td>{{item.price|currency:"RMB￥"}}</td>
                <td>{{item.zong|currency:"RMB￥"}}</td>
                <td><button ng-click="del($index)">删除</button></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>总金额</td>
                <td ng-bind="zprice()"></td>
                <td></td>
            </tr>
        </tfoot>
    </table>