<!DOCTYPE html>

<html>

	<head>

		<meta charset = "utf-8">

		<script type="text/javascript" src = "lib/angular.js"></script>

		<style type="text/css">

		   .item{

		   	 	height: 200px;

		   	 	width:100px;

		   	 	margin:5px;

		   	 	border:1px solid #ccc;

		   	 	float:left;

		   }

		</style>

	</head>

	<body ng-app = "mapp" ng-controller = "mctrl">

		<div class = "list">

			<div class = "item" ng-repeat = "item in items">

				<p class = "item-name"><span>商品名:</span>{{item.name}}</p>

				<p class = "item-price"><span>价格:</span>{{item.price|currency:"￥"}}</p>

				<input type = "button" ng-click = "buy($index)" value = "购买">

			</div>

		</div>

		<div class = "item-car">

			<p ng-repeat = "item in items">

				<span>{{item.name}}&nbsp&nbsp&nbsp&nbsp<span>

				<span>{{item.price|currency:"单价"}}&nbsp&nbsp&nbsp</span>

				<input type = "button" value = "-" ng-click = "minus($index)"/>

				<input type = "text" ng-model = "varlist.itemNum[$index]">

				<input type = "button" value = "+" ng-click = "add($index)"/>

				<span>单件总价:{{item.price*varlist.itemNum[$index]|currency:"￥"}}</span>

			</p>

			<p>总价：{{varlist.total|number:2}}</p>

		</div>

		<script type="text/javascript">

			var app = angular.module("mapp", []);

			app.controller("mctrl", function($scope) {

				// 数据源

			    $scope.items = [{

			        "name": "王老吉",

			        "price": 4

			    }, {

			        "name": "老干妈",

			        "price": 7.5

			    }, {

			        "name": "臭豆腐",

			        "price": 7.32

			    }, {

			        "name": "饼干",

			        "price": 22

			    }, ];

			    var len = $scope.items.length;

			    var arr = [];

			    // 循环为数组赋值

			    for (var i = 0; i < len; i++) {

			        arr[i] = 0;

			    }

			    // 检测是否变化，为了总价能够改变

			    $scope.$watch("varlist.itemNum", function() {

			        getTotal();

			    }, true);

			    // 定义变量

			    $scope.varlist = {

			        itemNum: arr,

			        total: 0

			    }

			    // 购物的时候操作

			    $scope.buy = function($index) {

			        $scope.varlist.itemNum[$index]++;

			        getTotal();

			    }

			    // -----

			    $scope.minus = function($index) {

			        if ($scope.varlist.itemNum[$index] == 0) {

			            return;

			        } else {

			            $scope.varlist.itemNum[$index]--;

			            getTotal();

			        }

			    }

			    // ++++

			    $scope.add = function($index) {

			        $scope.varlist.itemNum[$index]++;

			        getTotal();

			    }

			    // 计算总价

			    var getTotal = function($index) {

			        $scope.varlist.total = 0;

			        for (var j = 0; j < len; j++) {

			            $scope.varlist.total = $scope.varlist.total + $scope.varlist.itemNum[j] * $scope.items[j].price;

			        }

			        return $scope.varlist.total;

			    }

			});

		</script>

	</body>

</html>

2015-01-19   10:54:27  linJS

　　

AngularJS实现 购物车的更多相关文章

  1. angularJS商品购物车案例

    <!DOCTYPE html> <html ng-app="shopping"> <head lang="en"> < ...

  2. angularjs实现购物车批量删除，filter模糊查询，排序

    数据源 $scope.data=[ {num:1234,name:"ipad",price:3400.00,count:10}, {num:1235,name:"ipho ...

  3. AngularJS 实现简单购物车

    使用AngularJS实现一个简单的购物车,主要感受强大的双向绑定和只关注对象不关注界面特性. 先看看界面: 点击+-操作和删除: 这些全部只需要操作数据源就行,不需要关注界面. 实现过程: 一.使用 ...

  4. 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(3)--Idetity,OWIN前后端验证

    原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(3)--Idetity,OWIN前后端验证 chsakell分享了前端使用AngularJS,后端使用ASP. ...

  5. 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session

    原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端,以及前后端Session chsakell分享了前端使用AngularJS,后端使用ASP.NE ...

  6. 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(1)--后端

    原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(1)--后端 chsakell分享了前端使用AngularJS,后端使用ASP.NET Web API的购物车 ...

  7. angularjs购物车效果

    用angularjs写了一个购物车效果中. html代码: <div png-app="myAp" ng-controller="conTroll"> ...

  8. angularjs购物车练习

    本文是一个简单的购物车练习,功能包括增加.减少某商品的数量,从而影响该商品的购买总价以及所有商品的购买总价:从购物车内移除一项商品:清空购物车. 页面效果如图: 若使用js或jQuery来实现这个页面 ...

  9. angularJs 购物车模型

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...

随机推荐

  1. servlet课堂笔记

    1.servlet生命周期: 1> 加载和实例化 2> 初始化 init() 3> 处理请求 service()->doGet()/doPost() 4> 销毁 dest ...

  2. 图像滤波与OpenCV中的图像平滑处理

    .About图像滤波 频率:可以这样理解图像频率,图像中灰度的分布构成一幅图像的纹理.图像的不同本质上是灰度分布规律的不同.但是诸如"蓝色天空"样的图像有着大面积近似的灰度强度,而 ...

  3. [HDU1003]最长子序列和

    http://acm.hdu.edu.cn/showproblem.php?pid=1003 解题关键:1.最大连续子序列和模板 2.max.end不能使用,在oj中会显示编译错误 3.注意模板中没有 ...

  4. C++中const型数据的小结

    由于与对象又管的const型数据种类较多,形式又有些相似,往往难记,容易混淆,因此总结一下相关用法,具体用法可查看下方链接 C++中对象的常引用 C++中指向对象的常指针和指向常对象的指针 C++中的 ...

  5. 截止JDK1.8版本,java并发框架支持锁包括?

    读写锁 自旋锁 乐观锁

  6. JavaScript高级程序设计学习笔记--面向对象的程序设计（二）-- 继承

    相关文章: 面向对象的程序设计(一) — 创建对象 http://www.cnblogs.com/blackwood/archive/2013/04/24/3039523.html 继承 继承是OO语 ...

  7. 聚类算法（二）--BIRCH

    BIRCH (balanced iterative reducing and clustering using hierarchies)(名字太长不用管了) 无监督,适合大样本的聚类方法.大多数情况只 ...

  8. iOS常用设计模式——工厂方法（简单工厂模式，工厂方法模式， 抽象工厂模式）

    1. 简单工厂模式 如何理解简单工厂,工厂方法, 抽象工厂三种设计模式? 简单工厂方法包含:父类拥有共同基础接口,具体子类实现子类特殊功能,工厂类根据参数区分创建不同子类实例.该场景对应的UML图如下 ...

  9. UVA - 12563 Jin Ge Jin Qu hao (01背包)

    InputThe first line contains the number of test cases T (T ≤ 100). Each test case begins with two po ...

  10. “戏精少女”的pandas学习之路，你该这么学！No.5

    如果文章图片无法观看,请前往CSDN博客观看 https://blog.csdn.net/hihell 戏精博主即将上线 就在上一篇,梦想橡皮擦这位博主经过艰苦的努力 终于能创建一个dataframe ...