angularjs實現簡單的購物車功能

更新時間：2017年09月21日 10:30:33 作者：平平淡淡的痛

這篇文章主要為大家詳細介紹了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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: