angularJs入门之购物车实现

最新推荐文章于 2024-04-27 09:42:37 发布

赵乘风_i

最新推荐文章于 2024-04-27 09:42:37 发布

阅读量4.9k

点赞数 1

分类专栏： web前端 AngularJs 文章标签： javascript 前端 angularjs 框架

原创首发，欢迎关注~！如需转载，请注明出处

本文链接：https://blog.csdn.net/zr15829039341/article/details/53310104

版权

web前端同时被 2 个专栏收录

97 篇文章 4 订阅

订阅专栏

AngularJs

3 篇文章 1 订阅

订阅专栏

这几天在学习angularJs，勉强可以实现一个购物车。

我使用bootstrap框架以至于页面不那么丑

先放图，再说具体过程

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 购物车</title>
    <link rel="stylesheet" type="text/css"  href="css/bootstrap.min.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/angular.js"></script>
    <style>
      span{padding-left:50px;padding-right:50px;}
    </style>
    <script>
        var app=angular.module('myApp',[]);
        app.controller('myCtrl',function($scope){
            $scope.shopList=[
                { name:'单片机',price:'80.90',num:10},
                { name:'电烙铁',price:'20.40',num:10},
                { name:'万用表',price:'46.90',num:10},
                { name:'示波器',price:'231.00',num:10},
                { name:'电源',price:'279.30',num:10}
            ];
            //减少
            $scope.reduce= function (index) {
                if($scope.shopList[index].num>1){
                    $scope.shopList[index].num--;
                }else{
                    $scope.remove(index);
                }
            };
            //增加
            $scope.add=function(index){
                $scope.shopList[index].num++;
            };
            //计算总价
            $scope.allSum=function(){
                var allPrice = 0;
                for(var i= 0;i<$scope.shopList.length;i++){
                    allPrice+=$scope.shopList[i].price*$scope.shopList[i].num;
                }
                return allPrice;
            };
            //计算总数量
            $scope.allNum=function(){
                var allShu=0;
                for(var i=0;i<$scope.shopList.length;i++){
                    allShu+=$scope.shopList[i].num;
                }
                return allShu;
            };
            //移除一项
            $scope.remove=function(index){
                if(confirm('确定移除此项吗？')){
                    $scope.shopList.splice(index,1);
                }
            };
            //使得输入框中不得小于等于0
            $scope.change=function(index){
                if($scope.shopList[index].num>=1){
                }else{
                    $scope.shopList[index].num=1;
                }
            };
            //清空购物车
            $scope.removeAll=function(){
                if(confirm('确定清空购物车')){
                    $scope.shopList=[];
                }
            }
        });
   
    </script>
</head>
<body ng-app="myApp">
    <div class="container">
        <div ng-controller="myCtrl">
        <ul class="list-group">
            <li ng-repeat="shop in shopList" class="list-group-item">
                <span>{{shop.name}}</span>
                <span>{{shop.price|currency}}</span>
                <span>
                    <button ng-click="reduce($index)">-</button>
                    <input type="text" placeholder="请输入大于0的数" ng-model="shop.num" ng-change="change($index)">
                    <button ng-click="add($index)">+</button>
                </span>
                <span>{{shop.price*shop.num}}</span>
                <button class="btn btn-primary btn-xs" ng-click="remove($index)">移除</button>
            </li>
        </ul>
            总价：<span ng-bind="allSum()"></span>  总数：<span ng-bind="allNum()"></span>
            <button class="btn btn-warning "ng-click="removeAll()">清空购物车</button>
        </div>
    </div>
</body>
</html>

这是全部的代码

首先，引入css和JS文件，我这里是本地文件。

基于angular的MVC框架，在脚本中写上要显示的商品的信息

 var app=angular.module('myApp',[]);
        app.controller('myCtrl',function($scope){
            $scope.shopList=[
                { name:'单片机',price:'80.90',num:10},
                { name:'电烙铁',price:'20.40',num:10},
                { name:'万用表',price:'46.90',num:10},
                { name:'示波器',price:'231.00',num:10},
                { name:'电源',price:'279.30',num:10}
            ];

然后在body中添加要显示的内容

<body ng-app="myApp">
<div class="container">
    <div ng-controller="myCtrl">
        <ul class="list-group">
            <li ng-repeat="shop in shopList" class="list-group-item">
                <span>{{shop.name}}</span>
                <span>{{shop.price|currency}}</span>
                <span>
                    <button>-</button>
                    <input type="text" placeholder="请输入大于0的数" ng-model="shop.num">
                    <button >+</button>
                </span>
                <span>{{shop.price*shop.num}}</span>
                <button class="btn btn-primary btn-xs" >移除</button>
            </li>
        </ul>
        总价：<span ></span>  总数：<span ></span>
        <button class="btn btn-warning ">清空购物车</button>
    </div>
</div>
</body>

之后开始添加各个功能

            //减少
            $scope.reduce= function (index) {
                if($scope.shopList[index].num>1){
                    $scope.shopList[index].num--;
                }else{
                    $scope.remove(index);
                }
            };
            //增加
            $scope.add=function(index){
                $scope.shopList[index].num++;
            };
            //计算总价
            $scope.allSum=function(){
                var allPrice = 0;
                for(var i= 0;i<$scope.shopList.length;i++){
                    allPrice+=$scope.shopList[i].price*$scope.shopList[i].num;
                }
                return allPrice;
            };
            //计算总数量
            $scope.allNum=function(){
                var allShu=0;
                for(var i=0;i<$scope.shopList.length;i++){
                    allShu+=$scope.shopList[i].num;
                }
                return allShu;
            };
            //移除一项
            $scope.remove=function(index){
                if(confirm('确定移除此项吗？')){
                    $scope.shopList.splice(index,1);
                }
            };
            //使得输入框中不得小于等于0
            $scope.change=function(index){
                if($scope.shopList[index].num>=1){
                }else{
                    $scope.shopList[index].num=1;
                }
            };
            //清空购物车
            $scope.removeAll=function(){
                if(confirm('确定清空购物车')){
                    $scope.shopList=[];
                }
            }
        });

在写每一个功能时，就将事件绑定在相关的内容上

绑定完成后，body中如下代码所示

<body ng-app="myApp">
    <div class="container">
        <div ng-controller="myCtrl">
        <ul class="list-group">
            <li ng-repeat="shop in shopList" class="list-group-item">
                <span>{{shop.name}}</span>
                <span>{{shop.price|currency}}</span>
                <span>
                    <button ng-click="reduce($index)">-</button>
                    <input type="text" placeholder="请输入大于0的数" ng-model="shop.num" ng-change="change($index)">
                    <button ng-click="add($index)">+</button>
                </span>
                <span>{{shop.price*shop.num}}</span>
                <button class="btn btn-primary btn-xs" ng-click="remove($index)">移除</button>
            </li>
        </ul>
            总价：<span ng-bind="allSum()"></span>  总数：<span ng-bind="allNum()"></span>
            <button class="btn btn-warning "ng-click="removeAll()">清空购物车</button>
        </div>
    </div>
</body>

ok，比较简单的购物车就完成了。动手去做吧。

赵乘风_i

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
angularJs入门之购物车实现

这几天在学习angularJs，勉强可以实现一个购物车。我使用bootstrap框架以至于页面不那么丑先放图，再说具体过程购物车 span{padding-left:50px;padding-right:50px;} var app=angular.m
复制链接

扫一扫

专栏目录