使用Angular怎么计算购物车

本篇文章给大家分享的是有关使用Angular怎么计算购物车，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

专注于为中小企业提供网站设计、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业建华免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

实现过程：

一、使用任何语言创建一个服务端：

  public class ShoppingCar
  {
    public string Title { get; set; }
    public decimal UnitPrice { get; set; }
    public int Count { get; set; }
  }

public ActionResult GetCar()
    {
      List cars = new List
      {
        new ShoppingCar { Title="苹果",Count=1,UnitPrice=2.5m},
        new ShoppingCar { Title="香蕉",Count=3,UnitPrice=1.5m},
        new ShoppingCar { Title="苦瓜",Count=1,UnitPrice=3.5m},
        new ShoppingCar { Title="黄瓜",Count=3,UnitPrice=2.2m}
      };
      return Json(cars,JsonRequestBehavior.AllowGet);
    }

    public ActionResult AddCar(List car)
    {
      return Json("ok", JsonRequestBehavior.AllowGet);
    }

二、前台实现：

  
    
      
        
          标题
          单价
          数量
          小计
          删除
        
      
      
        
          {{item.Title}}
          {{item.UnitPrice}}
          
            
            +
            -
          
          {{item.Count*item.UnitPrice | number:2}}
          删
        
      
    
    总价格：{{ total | number:2}}
    提交

三、Angular部分

 var app = angular.module('DemoApp', []);

  app.controller('CartController', ['$scope', '$http', function ($scope, $http) {
    $scope.ShoppingCar = {}
    var GetCar = function () {
      $http.get('/Employee/GetCar')
      .success(function (response) {
        $scope.ShoppingCar = response;
        GetTotal();
      });
    }
    $scope.total = 0;
    var GetTotal = function () {
      for (var i = 0; i < $scope.ShoppingCar.length; i++) {
        var item = $scope.ShoppingCar[i];
        $scope.total += item.Count * item.UnitPrice;
      }
    }

    $scope.UpdateCar = function (title, count) {
      for (var i = 0; i < $scope.ShoppingCar.length; i++) {
        var item = $scope.ShoppingCar[i];
        if (item.Title == title) {
          item.Count = item.Count + count;//这里可以增加上下限制
          if (item.Count < 0) {
            $scope.ShoppingCar.splice(i, 1);
          }
        }
      }
      GetTotal();
    }
    $scope.submit = function () {
      $http.post('/Employee/AddCar', $scope.ShoppingCar)
          .success(function (response) {
          alert(response);
      });
    }
    GetCar();
  }]);

以上就是使用Angular怎么计算购物车，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。

分享名称：使用Angular怎么计算购物车
当前地址：http://dzwzjz.com/article/gehpep.html

大橙子网站建设，新征程启航

使用Angular怎么计算购物车

其他资讯