Angular实现购物车计算示例代码

前端之家收集整理的这篇文章主要介绍了Angular实现购物车计算示例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

使用AngularJS实现一个简单的购物车,主要感受强大的双向绑定和只关注对象不关注界面特性。

先看看界面:

点击+-操作和删除

这些全部只需要操作数据源就行,不需要关注界面。

实现过程:

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

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

二、前台实现:

标题数量删除