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

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

先看看界面：

点击+-操作和删除：

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

实现过程：

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

rush:java;"> public class ShoppingCar { public string Title { get; set; } public decimal UnitPrice { get; set; } public int Count { get; set; } }

rush:js;"> 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="苦瓜",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>

二、前台实现：

rush:js;">

标题数量删除

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

实现过程：

相关推荐