这篇文章主要为大家详细介绍了angularjs实现简单的购物车功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了angularjs实现购物车功能的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      margin-left: 10px;
    }
    li{
      list-style: none;
    }
    .add,.reduce{
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 1px solid #000;
      text-align: center;
    }
    .line{
      border-bottom: 1px solid #000;
    }
  </style>
  <script src="angular-1.5.5/angular.min.js"></script>
  <script>
    var myapp=angular.module("myapp",[]);
    myapp.controller("myCtrl",function($scope){
      $scope.cart=[
        {
          "shopName":"趣艺工坊",
          "checked":false,
          "goods":[
            {
              "goodsName":"纯手工制作木质时钟精致家具装饰摆件",
              "pic":"images/cart_01.jpg",
              "price":150.00,
              "number":1,
              "checked":false
            },
            {
              "goodsName":"木质蓝牙音箱包邮实木家具装饰摆件",
              "pic":"images/cart_02.jpg",
              "price":119.00,
              "number":2,
              "checked":true
            },
            {
              "goodsName":"装饰木雕,独特趣味设计家具装饰摆件",
              "pic":"images/cart_03.jpg",
              "price":120.00,
              "number":0,
              "checked":false
            }
          ]
        },
        {
          "shopName":"邻街纸艺",
          "checked":false,
          "goods":[
            {
              "goodsName":"纯手工制作木质时钟精致家具装饰摆件",
              "pic":"images/cart_04.jpg",
              "price":89.00,
              "number":2,
              "checked":true
            },
            {
              "goodsName":"木质蓝牙音箱包邮实木家具装饰摆件",
              "pic":"images/cart_05.jpg",
              "price":189.00,
              "number":1,
              "checked":false
            }
          ]
        },
        {
          "shopName":"纸来我往",
          "checked":true,
          "goods":[
            {
              "goodsName":"纯手工制作木质时钟精致家具装饰摆件",
              "pic":"images/cart_06.jpg",
              "price":289.00,
              "number":3,
              "checked":true
            }
          ]
        }

      ];
      //点击加减按钮,数量加减;点击删除按钮,删除商品
      $scope.reduce=function(goods){
        goods.number--;
        if (goods.number<=0) goods.number=0;
        $scope.totalMoney();
      };
      $scope.add=function(kind){
        kind.number++;
        $scope.totalMoney();
      };
      $scope.delete=function(item,index){
        item.goods.splice(index,1)
      };
      /*总金额计算*/
      $scope.totalMoney=function(){
        var total=0;
        for(var i=0;i<$scope.cart.length;i++){
          for(var j=0;j<$scope.cart[i].goods.length;j++){
            if($scope.cart[i].goods[j].checked){
              total+=$scope.cart[i].goods[j].price*$scope.cart[i].goods[j].number;
            }
          }
        }
        return total;
      };
      /*商铺选择*/
      $scope.shopChecked=function(item){
        if(item.checked==true){
          for(var i=0;i<item.goods.length;i++){
            item.goods[i].checked=true
          }
        }else {
          for(var i=0;i<item.goods.length;i++){
            item.goods[i].checked=false;
          }
        }
      };
      /*全部选择*/
      $scope.allChecked=function(){
        if($scope.allCheck){
          for(var i=0;i<$scope.cart.length;i++){
            $scope.cart[i].checked=true;
            for(var j=0;j<$scope.cart[i].goods.length;j++){
              $scope.cart[i].goods[j].checked=true;
            }
          }
        }else {
          for(var i=0;i<$scope.cart.length;i++){
            $scope.cart[i].checked=false;
            for(var j=0;j<$scope.cart[i].goods.length;j++){
              $scope.cart[i].goods[j].checked=false;
            }
          }
        }
      };
    })
  </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<div><input type="checkbox" ng-model="allCheck" ng-click="allChecked()">总金额:<span>{{ totalMoney() | currency:"¥"}}</span></div>
<div ng-repeat="item in cart">
  <div><input type="checkbox" ng-model="item.checked" ng-click="shopChecked(item)"><span>{{item.shopName}}</span></div>
  <ul>
    <li ng-repeat="kind in item.goods">
      <input type="checkbox" ng-model="kind.checked"><span>{{kind.goodsName}}</span>
      <p>{{kind.price}}</p>
      <p><span ng-click="add(kind)">+</span>{{kind.number}}<span ng-click="reduce(kind)">-</span></p>
      <p ng-click="delete(item,$index)">删除</p>
    </li>
  </ul>
</div>

</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
做空机构香橼称沽空Palantir 目标股价20美元

做空机构香橼称沽空Pa

做空机构香橼称沽空Palantir,目标价为20美元。
美股新能源汽车股盘初走高 小鹏汽车涨超4%

美股新能源汽车股盘初

美股新能源汽车股盘初走高,特斯拉涨2.65%,理想汽车涨2.7
爱奇艺跌超4% 百度回应称出(bu)售(mai)爱奇艺股份传闻不实

爱奇艺跌超4% 百度回

美股三大指数集体高开,道指涨0.25%,纳指涨0.54%,标普500
兴盛优选大战互联网巨头

兴盛优选大战互联网巨

现在的兴盛优选,难听的说,是为了传闻的上市,被互联网公司
百度风投近期完成高管变更,前小米战投董事总经理高雪出任CEO

百度风投近期完成高管

近日百度风投(Baidu Ventures)完成了管理人员的调整,前
快手一哥辛巴就“假燕窝”道歉 律师:可要求退货

快手一哥辛巴就“假燕

易观高级分析师陈涛表示,带货主播与代言人所代言的广告
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,