主页 / 网络编程 /

angularjs实现简单的购物车功能

网络编程 2021-07-04 17:32www.168986.cn编程入门
这篇文章主要为大家详细介绍了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" class="line">
  <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 class="add" ng-click="add(kind)">+</span>{{kind.number}}<span class="reduce" ng-click="reduce(kind)">-</span></p>
      <p ng-click="delete(item,$index)">删除</p>
    </li>
  </ul>
</div>

</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：React-Native左右联动List的示例代码 下一篇：JS实现前端缓存的方法

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by