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

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

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

先看看界面：

点击+-操作和删除：

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

实现过程：

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

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);

}

二、前台实现：

+

-

总价格：{{ 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();

}]);

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。