AngularJS+购物车+全选+清空+删除

最新推荐文章于 2023-08-05 12:18:34 发布

Logitech12

最新推荐文章于 2023-08-05 12:18:34 发布

阅读量637

点赞数

本文链接：https://blog.csdn.net/logitech12/article/details/78233065

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品</title>
    <style>
        span{
            display: inline-block;
            width: 18px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            background: #eee;
        }
    </style>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <script>
        var app = angular.module("myapp",[]);
        app.controller("mycont",function ($scope) {
            $scope.data = [{
                "name":"小米手机",
                "price":1000,
                "count":1
            }, {
                "name":"华为手机",
                "price":4000,
                "count":1
            }, {
                "name":"苹果手机",
                "price":5000,
                "count":1
            }, {
                "name":"三星手机",
                "price":3000,
                "count":1
            }];
            //全选、不选
            $scope.selectAll=false;
            $scope.checkall= function (m) {
                for(var i=0;i<$scope.data.length;i++){
                    if(m===true){
                        $scope.state=true;
                    }else {
                        $scope.state=false;
                    }
                }
            };
            //数量-
            $scope.min = function (index) {
                $scope.data[index].count --;
                if ($scope.data[index].count<=0){
                    $scope.data[index].count = 0;
                }
            }
            //数量+
            $scope.max = function (index) {
                $scope.data[index].count ++;
            }

	    //单个删除
            $scope.del = function (index) {
                if (confirm("确定删除吗？")){
                    $scope.data.splice(index,1);
                }
            }
            //清空购物车
            $scope.all = function () {
                $scope.data.length=0;
                /*for (var i=0;i<=$scope.data.length;i++){
                    $scope.data.splice(i,1);
                }*/
            }
            $scope.count = function () {
                var n = 0;
                for(var i=0;i<$scope.data.length;i++){
                    n+=$scope.data[i].price*$scope.data[i].count;
                }
                if (n>4000){
                    $scope.yf = 0;
                } else {
                    $scope.yf = 10;
                }
                return n;
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="mycont">
    <button ng-click="all()">清空购物车</button>
    <br/><br/>
    <table border="soild 1px #A875AD" cellpadding="10" cellspacing="0">
        <thead>
         <tr>
            <th>序号</th>
            <th><input type="checkbox" ng-model="selectAll" ng-click="checkall(selectAll)">全选</th>
            <th>品牌</th>
            <th>数量</th>
            <th>价格</th>
            <th>小计</th>
            <th><button>批量删除</button></th>
         </tr>
        </thead>
        <tbody>
         <tr ng-repeat="item in data">
            <td>{{$index}}</td>
            <td><input type="checkbox" ng-model="state"></td>
            <td>{{item.name}}</td>
            <td><span ng-click="min($index)">-</span><input type="text" ng-model="item.count"><span ng-click="max($index)">+</span></td>
            <td>{{item.price}}</td>
            <td>{{item.count*item.price}}</td>
            <td><button ng-click="del($index)">删除</button></td>
         </tr>
        </tbody>
    </table>
    <p>应付金额<a>{{count()}}</a></p>
    <p>邮费<a>{{yf}}</a></p>
    <p>实付金额<a>{{count()+yf}}</a></p>
</body>
</html>

Logitech12

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS+购物车+全选+清空+删除

html>html lang="en">head> meta charset="UTF-8"> title>商品title> style> span{ display: inline-block; width: 18px; height: 18px; line
复制链接

扫一扫