<!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. PID控制及整定算法

    一.PID控制算法 PID是比例.积分.微分的简称,PID控制的难点不是编程,而是控制器的参数整定.参数整定的关键是正确地理解各参数的物理意义,PID 控制的原理可以用人对炉温的手动控制来理解.阅读本 ...

  2. java try catch 与 throws 使用场景以及怎么合理使用？

    对于如下场景,给出不同的看法: 其实我更多的疑问在于,自定义的方法里面java api抛出了异常,这个时候,我是需要捕获呢?还是我也继续往上抛. 比如,我这里定义了一个日期处理的方法,有两种对异常的处 ...

  3. 【机器学习】聚类算法——K均值算法（k-means）

    一.聚类 1.基于划分的聚类:k-means.k-medoids(每个类别找一个样本来代表).Clarans 2.基于层次的聚类:(1)自底向上的凝聚方法,比如Agnes (2)自上而下的分裂方法,比 ...

  4. 在Eclipse里面配置Struts2

    下面介绍在Eclipse里面配置Struts2 下载Struts2的压缩包 我下载的是2.3.32版本 解压之后如图所示 apps目录:Struts2的范例 docs目录:Struts2的文档 lib ...

  5. 使用IDEA编译netty4

    本来计划一天一篇博文的,结果周末加班加的不亦乐乎,对整个项目重构添加国际化的功能,不停的使用native2ascii工具 使用IDEA编译原有的netty4要报错,我修改了下pom.xml,编译成功了 ...

  6. svn的revert、checkout、clean up、setting

    svn revert 描述恢复所有对文件和目录的修改,并且解决所有的冲突状态. svn revert不会只是恢复工作拷贝中一个项目的内容,也包括了对属性修改的恢复.最终,你可以使用它来取消所有已经做过 ...

  7. jquery 选择器的总结

    元素选择 $("input") id选择 $('#id') class选择 $('.id') 属性选择 $('[prop]')或者$('[prop=“value1”]')或者$(' ...

  8. URAL 2021 Scarily interesting! (贪心+题意)

    题意:给定两个队伍的每个人的得分,让你安排怎么比赛才能使得观众知道冠军的时间最长. 析:贪心,很简单,就是先开始总分高的先出最差劲的,总分低的先出最厉害的,这个题当时实在是读的不明白啊,WA了好多次. ...

  9. 【Qt官方例程学习笔记】Application Example（构成界面/QAction/退出时询问保存/用户偏好载入和保存/文本文件的载入和保存/QCommandLineParser解析运行参数）

    The Application example shows how to implement a standard GUI application with menus, toolbars, and ...

  10. UPCOJ9526（SG函数打表，nim游戏异或规则）

    #include<bits/stdc++.h>using namespace std;int f[1007],SG[1007],S[1007];//f为可以选取的石头个数,SG为sg函数, ...