使用Angular怎么计算购物车
本篇文章给大家分享的是有关使用Angular怎么计算购物车,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
专注于为中小企业提供网站设计、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业建华免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
实现过程:
一、使用任何语言创建一个服务端:
public class ShoppingCar { public string Title { get; set; } public decimal UnitPrice { get; set; } public int Count { get; set; } }
public ActionResult GetCar() { Listcars = 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怎么计算购物车
URL链接:http://myzitong.com/article/gehpep.html