AngularJS购物车功能增加/删除/价格的计算

最新推荐文章于 2024-05-28 18:30:26 发布

Android丶ztz

最新推荐文章于 2024-05-28 18:30:26 发布

阅读量322

点赞数

分类专栏： AngularJS

本文链接：https://blog.csdn.net/TianzhuZ/article/details/78331062

版权

AngularJS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AngularJS购物车功能增加/删除/价格的计算</title>
    <script type="text/javascript" src="AngularJS/angular.js" ></script>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            $scope.shops = [{
                name:"qq1",
                price:12.9,
                num:3,
                state:false
            },{
                name:"wx1",
                price:22,
                num:5,
                state:false
            },{
                name:"qq2",
                price:33,
                num:6,
                state:false
            },{
                name:"wx2",
                price:44,
                num:4,
                state:false
            }];

            //增加
            $scope.add = function(index){
                $scope.shops[index].num += 1;
            }
            //减少
            $scope.reduce = function(index){
                if($scope.shops[index].num>1){
                    $scope.shops[index].num -= 1;
                }else{
                    if(window.confirm("要删除"+$scope.shops[index].name+"吗？")){
                        $scope.shops.splice(index,1);
                    }else{

                    }
                }
            }

            //获取总价
            $scope.allPrice = function(){
                var all = 0;
                for(index in $scope.shops){
                    all += $scope.shops[index].price * $scope.shops[index].num;
                }
                return all;
            }

            //全选
            $scope.selectAll = false;
            $scope.selectAllFun = function(){
                if($scope.selectAll){
                    for(index in $scope.shops){
                        $scope.shops[index].state = true;
                    }
                }else{
                    for(index in $scope.shops){
                        $scope.shops[index].state = false;
                    }
                }
            }

            //反选
            $scope.checkSelectAll = function(){
                var flag = false;
                for(index in $scope.shops){
                    if($scope.shops[index].state){

                    }else{
                        flag = true;
                    }
                }
                //至少有一个没有被选中
                if(flag){
                    $scope.selectAll = false;
                }else{
                    $scope.selectAll = true;
                }
            }

            //批量删除
            $scope.deleteSelected = function(){
                var selectedShop = [];
                for(index in $scope.shops){
                    if($scope.shops[index].state){
                        selectedShop.push($scope.shops[index].name);
                    }
                }

                if(selectedShop.length>0){
                    for(i1 in selectedShop){
                        for(i2 in $scope.shops){
                            if(selectedShop[i1] == $scope.shops[i2].name){
                                $scope.shops.splice(i2,1);
                            }
                        }
                    }
                }else{
                    alert("请先选择")
                }
            }

            //判断数据源的长度
            $scope.getSize = function(){
                if($scope.shops.length > 0 ){
                    return false;
                }else{
                    return true;
                }
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
    <h3>我的购物车</h3>
    <button ng-click="deleteSelected()">批量删除</button><br /><br />
    <table ng-hide="getSize()" border="1 solid blue" cellpadding="10" cellspacing="0">
        <thead>
        <tr>
            <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th>
            <th>name</th>
            <th>price</th>
            <th>number</th>
            <th>totalPrice</th>
            <th>option</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="shop in shops">
            <td><input type="checkbox" ng-model="shop.state" ng-click="checkSelectAll()"/></td>
            <td>{{shop.name}}</td>
            <td>{{shop.price | currency:"￥"}}</td>
            <td>
                <button ng-click="reduce($index)">-</button>
                <input type="number" ng-model="shop.num" style="width: 30px;"/>
                <button ng-click="add($index)">+</button>
            </td>
            <td>{{shop.price * shop.num | currency:"￥"}}</td>
            <td><button>删除</button> </td>
        </tr>
        <tr>
            <td colspan="6">总价为：<span ng-bind="allPrice() | currency:'￥'"></span></td>
        </tr>
        </tbody>
    </table>

    <span ng-show="getSize()">您的购物车为空，请先逛<a href="#">购物车</a></span>
</center>
</body>
</html>

Android丶ztz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS购物车功能增加/删除/价格的计算

html>html>head> meta charset="UTF-8"> title>AngularJS购物车功能增加/删除/价格的计算title> script type="text/javascript" src="AngularJS/angular.js" >script> script> var app = angular.module
复制链接

扫一扫