angular实现购物车

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

原创最新推荐文章于 2019-06-11 15:57:18 发布 · 483 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

13 篇文章

订阅专栏

本文档详细介绍了如何使用AngularJS实现一个购物车功能，包括页面布局、数据初始化、商品遍历显示、数量增减操作、总价计算、货币符号过滤器应用以及商品删除的确认对话框。通过实例代码展示，帮助读者理解AngularJS在购物车场景中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.实现的效果如下

1. 完成页面布局，如图1.1（button按钮可以用普通按钮）（页面布局合理、代码无误各 5分、共10分）

2.声明数据对象，初始化商品信息，数据自拟且不低于四条（代码、效果各5分）

3. 用ng-repaet指令将对象遍历并渲染到页面中（代码、效果各5分）

4.点击”+”按钮输入框中的数量加1（5分），同时可以计算出商品小计（5分）和购物车总价（5分）。同理，当点击”-”按钮时输入框中的数量减1（5分），商品小计（5 分）和购物车总价（5分）都会改变。在输入框中手动输入数量值，商品小计和购物车总价动态改变（5分）

5. 使用AngularJS的过滤器在商品价格、商品小计、购物车总价前加”￥：”。（5分）

6. 当商品数量为1，用户点击”-”操作时，弹出对话框，询问用户是否删除该商品。（5 分）如图1.2 当用户点击”确认”时删除该条商品信息（5分），当用户点击”取消”时商品恢复原来数量。（5分）

7. 用户点击第一个checkbox代表全选，全选商品后点击删除选中商品，选中商品被删除，若购物车商品被全部删除后，展示如图1.3（代码、效果各5分）

二.代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的购物车</title>
    <script src="http://code.angularjs.org/1.2.5/angular.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        var data=[{
            done:false,
            name:"小米",
            price:666,
            count:1,
        }, {
            done:false,
            name:"华为",
            price:888,
            count:1,
        },{
            done:false,
            name:"苹果",
            price:299,
            count:1,
        },{
            done:false,
            name:"小辣椒",
            price:555,
            count:1,
        },{
            done:false,
            name:"坚果",
            price:1999,
            count:1,
        }
        ]
        myapp.controller("myCtrl",function ($scope) {
            //声明
            $scope.data=data;
            $scope.price=0;
            //清空购物车
            $scope.deleteAll=function () {
                var aa=confirm("你是否确定清空购物车?");
                if(aa==true) {
                   $scope.data.length=0;
                   $scope.remove("tr:eq(0)");

                }
            }
            //全选按钮
            $scope.gou=function () {
                for(var i=0;i<$scope.data.length;i++) {
                    if($scope.checkAll==true) {
                        $scope.data[i].done=false;
                    } else {
                        $scope.data[i].done=true;
                    }
                }
                $scope.numprice();
            }
            //勾选总价
            $scope.numprice=function () {
                $scope.price=0;
                for(var i=0;i<$scope.data.length;i++) {
                    if($scope.data[i].done==true) {
                        $scope.price+=$scope.data[i].count*$scope.data[i].price;
                    }
                }
            }
            //数量-
            $scope.min=function (index) {
                $scope.data[index].count--;
                $scope.numprice();
                if ($scope.data[index].count <= 0) {
                    $scope.data[index].count=0;
                }
            }
            //数量+
            $scope.max=function (index) {
                $scope.data[index].count++;
                $scope.numprice();
            }
            //单击删除
            $scope.delete=function (index) {
                var aa=confirm("你是否确定将选定的商品移出购物车?");
                if(aa==true) {
                    $scope.data.splice(index,1);
                }
            }
            //勾选总价
            $scope.sumprice=function () {
                $scope.price=0;
                for(var i=0;i<$scope.data.length;i++) {
                        $scope.price+=$scope.data[i].count*$scope.data[i].price;
                }
                return $scope.price;
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h3>我的购物车</h3>
<table  border="soild 1px #000" cellpadding="10" cellspacing="0" class="tab">
    <thead>
    <tr><th colspan="6"><button ng-click="deleteAll()" style="float: right;background-color: red">清空购物车</button></th></tr>
    <tr>
        <th><input type="checkbox" ng-click="gou()" ng-model="checkAll">全选</th>
        <th>name</th>
        <th>price</th>
        <th>number</th>
        <th>totalPrice</th>
        <th>option</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in data">
        <td><input type="checkbox" ng-model="item.done" ng-click="numprice()"></td>
        <td>{{item.name}}</td>
        <td>{{item.price|currency:'￥'}}</td>
        <td>
            <button ng-click="min($index)">-</button>
            <input type="text" ng-model="item.count"/>
            <button ng-click="max($index)">+</button> </td>
        <td>{{item.price*item.count|currency:'￥'}}</td>
        <td><button ng-click="delete($index)">删除</button></td>
    </tr>
    <tr><td colspan="6">商品总价:<span >{{sumprice()|currency:'￥'}}</span></td></tr>
    </tbody>
</table>
</body>
</html>