angular购物车demo

最新推荐文章于 2019-06-11 15:57:18 发布

发疯的man

最新推荐文章于 2019-06-11 15:57:18 发布

阅读量529

点赞数

分类专栏： angularJS 文章标签： html angular stylesheet

本文链接：https://blog.csdn.net/lzh657083979/article/details/78159373

版权

angularJS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="angular.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <script type="text/javascript" src="2.js"></script>

</head>
<body ng-app="MyCar" ng-controller="aa">
    <input type="text" class="span3" placeholder="Type something…" ng-model="search" ng-show="data.length">

    <div class="container" >
        <table class="table table-striped"  ng-show="data.length">
            <caption style="text-align: center"><h3>购物车列表</h3></caption>
            <thead>
                <tr>
                    <th ng-click=change('id') ng-class="{dropup : order==='-'}">产品编号<span class="caret"></span></th>
                    <th ng-click=change('name') ng-class="{dropup : order==='-'}">产品名字<span class="caret"></span></th>
                    <th ng-click=change('quantity') ng-class="{dropup : order==='-'}">购买数量<span class="caret"></span></th>
                    <th ng-click=change('price') ng-class="{dropup : order==='-'}">产品单价<span class="caret"></span></th>
                    <th ng-click=change('price') ng-class="{dropup : order==='-'}">产品总价<span class="caret"></span></th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody >
                <tr ng-repeat="item in data | filter : {id:search} | orderBy:order + orderType">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>
                        <button type="button" class="btn btn-info active" ng-click="remove(item.id)">-</button>
                        <input type="text" value="{{item.quantity}}" ng-model="item.quantity" />
                        <button type="button" class="btn btn-info active" ng-click="add(item.id)">+</button>
                    </td>
                    <td>{{item.price | currency:'￥' }}</td>
                    <td>{{item.price*item.quantity | currency:'￥'}}</td>
                    <td>
                        <button type="button" class="btn btn-danger active" ng-click="pop(item.id)">移除</button>
                    </td>
                </tr>
                <tr>
                    <td>总价：</td>
                    <td ng-bind="totalprice()" ></td>
                    <td>购买总数：</td>
                    <td>{{totalnum()}}</td>
                    <td colspan="2"><button ng-click=popAll() type="button" class="btn btn-danger active">全部移除</button></td>

                </tr>
            </tbody>
        </table>
        <p ng-show="! data.length">购物车为空</p>
    </div>
</body>
</html>

var myInjectorModule = angular.module("MyCar",[]);
myInjectorModule.controller("aa",["$scope",function($scope){
    $scope.data=[{
        id:100,
        name:'iphone5',
        quantity:24,
        price:4000
    },{
        id:200,
        name:'htc',
        quantity:33,
        price:3500
    },{
        id:300,
        name:'xiaomi',
        quantity:22,
        price:2456
    },{
        id:400,
        name:'sony',
        quantity:64,
        price:4560
    },]

    /**
     * [pp description]购买总价钱
     * @return {[type]} [description]
     */
    $scope.totalprice = function(){
        var total=0;
        angular.forEach($scope.data,function(item){
            total+=item.quantity*item.price;
        })
        return total;
    }
    // $scope.totalprice =pp();

    /**
     * [pp description]购买总数
     * @return {[type]} [description]
     */
    $scope.totalnum = function(){
        var total=0;
        angular.forEach($scope.data,function(item){
            total+=item.quantity;
        })
        return total;
    }
    // $scope.totalnum =ppp();

    /**
     * 删除
     * @param  {[type]} id [description]
     * @return {[type]}    [description]
     */
    $scope.pop=function(id){
        var index=findIndex(id);
        if(index !== -1){
            $scope.data.splice(index,1)
        }
    }
    /**
     * 删除全部
     * @return {[type]} [description]
     */
    $scope.popAll=function(){

        $scope.data=[]
    }

    /**
     * 减少一个数量
     * @param  {[type]} id [description]
     * @return {[type]}    [description]
     */
    $scope.remove=function(id){
        var index=findIndex(id);
        if(index!==-1){
            if($scope.data[index].quantity>1){
                --$scope.data[index].quantity
            }else{
                var flag=confirm("你确定要删除这个商品么？")
                if(flag){
                    $scope.pop(id)
                }
            }

        }

    }
    /**
     * 添加一个数量
     * @param  {[type]} id [description]
     * @return {[type]}    [description]
     */
    $scope.add=function(id){
        var index=findIndex(id);
        if(index!==-1){
            ++$scope.data[index].quantity
        }
    }

    /**
     * 查找对应id对象所在的坐标
     * @param  {[type]} id [description]
     * @return {[type]}    [description]
     */
    var findIndex=function(id){
        var index=-1;
        angular.forEach($scope.data,function(item,key){
            if(item.id==id){
                index=key;
                return index;
            }
        })
        return index;
    }
    /**
     * 监视data数据的变化，脏检查
     * @param  {[type]} newdValue                                                                                  [description]
     * @param  {[type]} oldValue){      angular.forEach(newdValue,function(item,key){           if(item.quantity<1){                var flag          [description]
     * @param  {[type]} true                                                                                       [description]
     * @return {[type]}                                                                                            [description]
     */
    $scope.$watch("data",function(newdValue,oldValue){
        angular.forEach(newdValue,function(item,key){
            if(item.quantity<1){
                var flag=confirm("你确定要删除这个商品么？")
                if(flag){
                    $scope.pop(item.id)
                }else{
                    alert(1)
                    item.quantity=oldValue[key].quantity
                }
            }
        })
    },true)

    /**
     * 过滤器
     * @type {String}
     */
    $scope.order="-";
    $scope.orderType="id";
    $scope.change=function(type){
        $scope.orderType=type;
        if($scope.order=='-'){
            $scope.order="";
        }else{
            $scope.order="-"
        }
    }
}
])

效果图：
这里写图片描述

发疯的man

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
angular购物车demo

html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="angular.js"></script> <link rel="stylesheet" type="text/cs
复制链接

扫一扫